Revision as of 20:02, 23 June 2019

Some useful HTML tags about form

http://www.w3schools.com/html/html_forms.asp

form

<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

radio button label and input

<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

dropdown list select and option

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Upload file using input

<form action="demo_form.asp">
  Select a file: <input type="file" name="img">
  <input type="submit">
</form>

div

<div style="color:#0000FF">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

PHP

Differences between a standard HTML doc and a PHP doc

PHP scripts should be saved with the .php file extension.
You place PHP code within <?php and ?> tags, normally withink the context of some HTML.
PHP is a server-side technology. So PHP scripts must be run on a PHP-enabled Web server. This means that PHP must be run through a URL (i.e. http://yourdomain/mypage.php).

If the php source code is

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<?php
# This script does nothing much.

echo '<p>This is a line of text.<br />This is another line of text.</p>';

/*
echo 'This line will not be executed.';
*/

echo "<p>Now I'm done.</p>"; // End of PHP code.

?>
</body>
</html>

then when we view the page source from a web browser, it will look like

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<p>This is a line of text.<br />This is another line of text.</p><p>Now I'm done.</p>
</body>
</html>

Resource

Debugging techniques

Run PHP scripts through a URL; i.e. it must be requested through http://something.
Know what version of PHP you're running; run phpinfo.php to confirm.
Make sure display_errors is on. This is related to PHP configuration setting.
CHeck the HTML source code.
Trust the error message.

Quick sheet

print_r($_SERVER); print 'ABCD';
Use /* and */ for comments
Variables are case-sensitive!
Constants define('PI', 3.14);
Strings: "Hello, $first_name", "I said \"How are you?\"". Note that backslash is used to escape the quotation.
Arrays can be used by using either indexed array or associative array. For indexed arrays, the key is 0,1,2,3,... and for associative arrays, the key is a string. For example, $name[0]='Don' and $state['VT'] = 'Vermont'.
Single quotation marks are treated literally; items within double quotation marks are extrapolated. This means that within double quotation marks, a variable's name is replaced with its value, but the same is not true for single quotation marks.
XHTML are different from HTML
- the code needs to be in all lowercase letters
- every tag attribute must be enclosed in quotes
- For example, <INPUT TYPE=TEXT NAME=address SIZE=40> in HTML becomes <input text="text" name="address" size="40"> in XHTML
For avoiding security problems in form, use PHP functions like htmlspecialchars(), htmlentities(), strip_tags().
- htmlspecialchars() converts certain HTMLM tags into their entity versions. The entity version appears in the output but isn't rendered.
- htmlentities() turns all HTML tags into their entity versions.
- strip_tags() removes all HTML and PHP tags.
foreach() {}
abcd

PHP, form and POST method

PHP form handling

#

index.php

welcome.php

1.

<html>
<body>

<form action="welcome.php" method="post">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

</body>
</html>

 <html>
 <body>

 Welcome <?php echo $_POST["fname"]; ?>!<br />
 You are <?php echo $_POST["age"]; ?> years old.

 </body>
 </html>

The 'action' attribute in <form> defines an absolute or a relative URL. That is, the action could be pointing to an asp, cgi page or something like "mailto:[email protected]".

PHP, form and GET method

GET method

index.php

welcome.php

<form action="welcome.php" method="get">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

Welcome <?php echo $_GET["fname"]; ?>.<br />
You are <?php echo $_GET["age"]; ?> years old!

GET, the default, will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

MySQL basic operations

Log into root

$ mysql -u root -h myserver-sever.com -p

Create a new mysql database called demo

mysql> CREATE DATABASE demo;

create a new user and GRANT (add) privileges to a newly created user on all tables in the demo database.

CREATE USER 'user1'@'localhost' IDENTIFIED BY 'mypassword';
GRANT ALL ON demo.* TO 'user1'@'localhost';

OR

mysql> GRANT ALL ON demo.* TO user1@localhost IDENTIFIED BY 'mypassword';

How to connect to the demo database on local/remote MySQL server?

$ mysql -u user1 -h mysql.server.com -p demo

To remove an account

DROP USER 'user1'@'localhost'

Create a table on the demo database

mysql> USE demo;
mysql> DROP TABLE Employee;

mysql> CREATE TABLE Employee (
    ->     Name VARCHAR(50),
    ->     Phone VARCHAR(15)
    -> );
Query OK, 0 rows affected (0.21 sec)

mysql> Show tables;
mysql> Describe Employee;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| Name  | varchar(50) | YES  |     | NULL    |       |
| Phone | varchar(15) | YES  |     | NULL    |       |
+-------+-------------+------+-----+---------+-------+
2 rows in set (0.03 sec)

mysql> INSERT INTO Employee (Name, Phone) VALUES ('Joe Wang', '666 2323');
Query OK, 1 row affected (0.04 sec)

mysql> INSERT INTO Employee (Name) VALUES ('John Doe');
Query OK, 1 row affected (0.02 sec)

mysql> INSERT INTO Employee (Name, Phone) VALUES ('John Doe', NULL);
Query OK, 1 row affected (0.01 sec)

mysql> Select * from Employee;
+----------+----------+
| Name     | Phone    |
+----------+----------+
| Joe Wang  | 666 2323 |
| John Doe | NULL     |
| John Doe | NULL     |
+----------+----------+

Username/password

http://taichi.selfip.net:81/lang/php/w3/login/login.php

File upload

Need to change the folder permission/property. See here.

chmod -R 777 FOLDERNAME
sudo usermod www-data --apend --groups GROUPNAME

where GROUPNAME is the group name of the folder and www-data is the user that runs the web server.

sudo chown -R .www-data FOLDERNAME

where the dot means no change for the owner's name. We just change the group name. It is also helpful to do chmod -R 775 FOLDERNAME.

just edit /etc/group file. See the link above.

Examples:

Login/out + File upload

The following test page combines the ideas of login/out and file upload.

http://taichi.selfip.net:81/lang/php/w3/loginuploadphp/loginupload.php

PHP and database

Books

http://www.amazon.com/Head-First-MySQL-Lynn-Beighley/dp/0596006306/ref=tmm_pap_title_0?ie=UTF8&qid=1360359135&sr=8-2

CSS

http://www.w3schools.com/css/default.asp
HTML and CSS: Design and Build Websites
beginner and advanced Designer/developer Shay Howe put together a set of free lessons.
channel9.msdn.com

Web colors

Normally hex form requires 6 digits but the short form only requires 3 digits. For example, #09C is the same as #0099CC.

Google chrome devtools provides a color magnifier which can be used to identify the color code of a specific pixel on the screen. The way I discover it is

Open devtools
Right click on a website and choose 'inspect'
Click somewhere having class. The style definition will be shown in a small panel
If color was used somewhere, there should be a small square showing the defined color. Click the square.
Now if we move the cursor to the website, a magnifier will be shown up

Here is a gif showing the process to get the color picker.

Chrome-DevTools website has a video instruction.
Color Picker or Eyedropper from Chrome-DevTools CSS Reference

Important Tools

http://www.lifehack.org/314802/10-best-tools-optimize-and-audit-css-code

Notepad++ - color coded formatting
Stylizer - CSS editor with preview and has 8 built-in browsers
Blueprint - CSS framework
ProCSSor - cleans and organizes your css the way you want it
CSS Compressor - reducing the size of your CSS code and helping your website to load much faster as a result

Simple example

<style>
body
{
    background-color:#d0e4fe;
}
h1
{
    color:orange;
    text-align:center;
}
p
{
    font-family:"Times New Roman";
    font-size:20px;
}
</style>

To insert a CSS in an html file, use

<link rel="stylesheet" type="text/css" href="mystyle.css">

Margin vs padding

What’s the difference between comma separated identifiers and space separated?

Style

CSS Styling

Overlapping elements

CSS position -> overlapping elements

Float an image

CSS floating -> How Elements Float

Text in Transparent Box

CSS Image Opacity

jQuery

Javascript & jQuery: The Missing Manual

To use the javascript in the HTML code, we can grab the script from internet, local directory or defined in the html.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
          effect: 'random'
    });
</script>

Image slider/carousel/lightbox

Nivo slider Free to abuse.
High slide Non free for commerical/government use.
Lightbox2 by Lokesh Dhakar. It needs to create a thumbnail version of all images.
http://ashleydw.github.io/lightbox/. It still needs to create a thumbnail version of all images.

It seems if we want to create lightbox image gallery, we need to create thumbnails first. We can skip creating thumbnail images if we don't need javascript and lightbox effect.

Tree

Twitter Bootstrap

Tutorial

Examples

Plugins

http://getbootstrap.com/javascript/ Take a look at ScrollSpy.
http://jquery-plugins.net/tag/sticky-scroll
http://bigspotteddog.github.io/ScrollToFixed/

Misc

Cheatsheet

https://hostingfacts.com/html-cheat-sheet/ (23 pages in pdf or 1 in png)

Intro to Graphic Design

https://www.udemy.com/introduction-to-graphic-design/?dtcode=onMH2sD3bj21

Test mobile-friendliness

https://www.google.com/webmasters/tools/mobile-friendly/

How to emulate a mobile device in a desktop browser

https://www.digitalcitizen.life/emulate-mobile-device-desktop-browser

Identify font in a web page

4 Ways To Quickly Identify Your Favorite Web Page Fonts. For example, it looks like this site is using Open Sans according to the Chrome Developer Tools.

Fonts, icons

How can I determine what font a browser is actually using to render some text? Firefox is easy.
http://icoconvert.com/
http://fortawesome.github.io/Font-Awesome/
Kubuntu icons EvolvereSuit
https://fonts.google.com/
http://fontawesome.io/icons/ and here
Icon Fonts Are Awesome for Your Site: Here’s Why

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>MUO Icon Fonts</title>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			html {
				font-family: helvetica, arial;
			}

            @keyframes move {
              from { margin-left: 0; }
              to { margin-left: 400px; }
            }

            .bike {
              animation-name: move;
              animation-duration: 4s;
            }
		</style>
	</head>
	<body>
        <i class="fa fa-cog"></i> My First Icon

        <i class="fa fa-battery-0 fa-lg"></i>
        <i class="fa fa-battery-1 fa-2x"></i>
        <i class="fa fa-battery-2 fa-3x"></i>
        <i class="fa fa-battery-3 fa-4x"></i>
        <i class="fa fa-battery-4 fa-5x"></i>

        <i class="fa fa-refresh fa-spin fa-3x"></i>

        <i class="fa fa-motorcycle fa-5x bike"></i>
	</body>
</html>

Editor

Brackets
Plunker online editor

Free images

10 Best Sites That Offer Gorgeous Free Images for Blogs

Free icons

Convert/crop an image to round shape, or different resolutions

https://www298.lunapic.com/editor/?action=crop (you can manually select an area)
http://icoconvert.com/ (you cannot select an area)

Design logos, banners, book covers, icons, covers, menus, ...

10 Things You Can Create With Canva With Zero Effort

Cookies

An example to inform visitors https://www.jamescoyle.net/how-to/116-simple-apache-reverse-proxy-example

https://www.cookielaw.org/the-cookie-law/

DAP: Digital Analytics Program

Web analytics

List of web analytics software such as AWStats

Section 508 compliant

https://training.cit.nih.gov/class_details.aspx?cId=NIHCIT-AT100
https://training.cit.nih.gov/class_details.aspx?cId=NIHCIT-AT173
https://training.cit.nih.gov/class_details.aspx?cId=NIHCIT-AT171
Random examples of personal website including publications: Peddada, Nason

An example is to add alt="" to provide an alternative text for an image. Note that alt attribute is not allowed for an a element.

<a href="abc.png"><img src="abc.png" alt="">Visit me</a>

How to force pdf files to open or downloaded in browser

https://stackoverflow.com/questions/6293893/how-to-force-files-to-open-in-browser-instead-of-download-pdf

Examples of R package html page

BCRA R Package (linked from Mitchell H. Gail page

URL Encode/decode (such as Chinese characters) using UTF-8 encoding

To copy URL with UTF-8 encoding, adding a space at the end of URL in the address bar before copying. It works.
bing: url decode
https://www.urldecoder.org/
https://www.url-encode-decode.com/

Check websites for broken links

LinkChecker
bash script lynx_traversal

Calculate page loading time

Get pageload time using command line. This works on local servers too.

$ time wget -pq --no-cache --delete-after http://10.42.0.66/wiki/index.php/C
real	4m30.402s
user	0m0.036s
sys	0m0.032s

It seems apache/mediawiki have a cache system. If I repeat the testing on the same page, it will be fast. But if I test on a new page, it will be slow again.

We can also use curl. Testing a website from Linux command line

$ curl --trace-time -o /dev/null http://10.42.0.66/wiki/index.php/Virtualbox
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  145k    0  145k    0     0   5161      0 --:--:--  0:00:28 --:--:-- 32638

Code beautify/validator

https://codebeautify.org/

Print with PDF

Tested on this page

Print Friendly. Format may be changed. Page font size looks good.
web2pdfconvert. Format may be kept. Page font size is large. Article becomes 1.5x or double spaced.
http://pdfmyurl.com. Not good.

Developer Tools

HTML 5 outliner

Outliner from Wikipedia. Some common file formats include XML, HTML, OPML, OML,RDF.
https://gsnedders.html5.org/outliner/
https://addons.mozilla.org/en-US/firefox/addon/html5_outliner/
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

Inspect

Google Chrome: right click -> Inspect
- https://developers.google.com/web/tools/chrome-devtools/, https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
- Inspect Element is Chrome's version of Firebug.
Firefox: right click -> Inspect Element. See Open the Inspector.

CGI/Perl

On Ubuntu, the CGI script should be placed in /usr/lib/cgi-bin folder.

$ ls -l /usr/lib/cgi-bin/hello.cgi
-rwxr-xr-x 1 root root 139 2012-11-21 12:19 /usr/lib/cgi-bin/hello.cgi

Notice that mode is 755 for the executable file. The script

$ cat /usr/lib/cgi-bin/hello.cgi
#!/usr/bin/perl

print "Content-type: text/html\n\n";

print <<END_HTML;
<html>
<head></head>
<body>Hello, World!</body>
</html>
END_HTML

Open a web browser and enter http://localhost/cgi-bin/hello.cgi.

If the cgi was used in html form, the html code should look like

<FORM ACTION="/cgi-bin/mycgi.pl">
favorite color: <INPUT name="favecolor">
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Html: Difference between revisions