Html: Difference between revisions
Jump to navigation
Jump to search
| Line 182: | Line 182: | ||
Need to change the folder permission/property. See [http://stackoverflow.com/questions/14116708/adding-apache-to-a-user-group-file-upload-permission here]. | Need to change the folder permission/property. See [http://stackoverflow.com/questions/14116708/adding-apache-to-a-user-group-file-upload-permission 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. | where GROUPNAME is the group name of the folder and www-data is the user that runs the web server. | ||
* Directly edit /etc/group file. See the link above. | |||
=== PHP and database === | === PHP and database === | ||
Revision as of 15:12, 5 February 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
- Learning PHP, MySQL, JavaScript, and CSS
- PHP Solutions: Dynamic Web Design Made Easy
- Suhosin PHP Advanced Protection System
PHP, form and POST method
| # | 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
| 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 |
+----------+----------+
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.
- Directly edit /etc/group file. See the link above.
PHP and database
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
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
- jQuery main page (download 1.8.3, simple example)
- jQuery plugin
- Tutorial
- multiple selection without Ctrl key
- Understand jQuery
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
- Nivo slider Free to abuse.
- High slide Non free for commerical/government use.
Tree
- http://code.google.com/p/dynatree/
- https://github.com/jzaefferer/jquery-treeview
- http://www.queness.com/post/1138/10-javascriptcss-treeview-and-sitemap-plugins-and-tutorials
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>