Html: Difference between revisions

From 太極
Jump to navigation Jump to search
Line 75: Line 75:
* Use /* and */ for comments
* Use /* and */ for comments
* Variables are case-sensitive!
* 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.
* 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'.
* 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'.

Revision as of 14:25, 4 March 2013

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).

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

  1. 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:

  1. http://taichi.selfip.net:81/lang/php/w3/uploadphp/
  2. http://taichi.selfip.net:81/lang/php/xqto/index.php

Login/out + File upload

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

  1. 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

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">

Style

CSS Styling

Overlapping elements

CSS position -> overlapping elements

Float an image

CSS floating -> How Elements Float

Text in Transparent Box

CSS Image Opacity

Javascript

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

Tree

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>
Retrieved from "https://wiki.taichimd.us/index.php?title=Html&oldid=1164"