What We Will Do

We will build a web site

We will create web pages using HTML
We will add a consistent style using CSS
We will add computer code using JavaScript
We will add static data pages
We will fetch data using Http
We will fetch data using AppML
We will fetch data using SQL

網站內容大概長得像這樣

Create a CSS Style Sheet

body {

    font-family: "Trebuchet MS", Verdana, sans-serif;

    font-size: 16px;

    background-color: dimgrey;

    color: #696969;

    padding: 3px;

}

#main {

    padding: 5px;

    padding-left:  15px;

    padding-right: 15px;

    background-color: #ffffff;

    border-radius: 0 0 5px 5px;

}

h1 {

    font-family: Georgia, serif;

    border-bottom: 3px solid #cc9900;

    color: #996600;

    font-size: 30px;

}

The CSS file above defines the styles to be used for:

The HTML body element <body>
The HTML element with id="main"
The HTML heading element <h1>

edit the file index.html

<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>

<body>

<div id="main">
<h1>Welcome to Our Company</h1>
.....
<p>Live Data (Files and Databases)</p>
</div>

</body>
</html>

Edit the About Page

To complete your work, do the same changes in about.html.

1. Add a link to the style sheet.

2. Add a <div id="main"> element.

about about.html

<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>

<body>

<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>

</body>
</html>

Adding Code (JavaScript)

What We Will Do

In this chapter we will:

Create some computer code (JavaScript)
Add a link to the script in your pages

Create JavaScript

create a new file named script.js

edit script.js

==============================================================

document.getElementById("foot01").innerHTML =
"<p>© " + new Date().getFullYear() + " W3Schools. All rights reserved.</p>";

==========================================

Edit the Home Page

edit the file index.html

<div id="main">
........
<p>Live Data (Files and Databases)</p>
<footer id="foot01"></footer>
</div>

<script src="script.js"></script>

</body>

Web Building - Adding a Data Page

What We Will Do

In this chapter we will:

Add a data page to the web site

edit site.css

Create a Data Page

create a new file named customers.html

add the following content to customers.html

customers.html

<!DOCTYPE html>

<html>

<head>

  <title>Customers</title>

  <meta charset="UTF-8">

  <link href="site.css" rel="stylesheet">

</head>

<body>

<div id="main">

<h1>Customers</h1>

<table>

<tr>

  <th>Name</th>

  <th>City</th>

  <th>Country</th>

</tr>

<tr>

  <td>Alfreds Futterkiste</td>

  <td>Berlin</td>

  <td>Germany</td>

</tr>

<tr>

  <td>Berglunds snabbköp</td>

  <td>Luleå</td>

  <td>Sweden</td>

</tr>

<tr>

  <td>Centro comercial Moctezuma</td>

  <td>México D.F.</td>

  <td>Mexico</td>

</tr>

<tr>

  <td>Ernst Handel</td>

  <td>Graz</td>

  <td>Austria</td>

</tr>

<tr>

  <td>FISSA Fabrica Inter. Salchichas S.A.</td>

  <td>Madrid</td>

  <td>Spain</td>

</tr>

<tr>

  <td>Galería del gastrónomo</td>

  <td>Barcelona</td>

  <td>Spain</td>

</tr>

<tr>

  <td>Island Trading</td>

  <td>Cowes</td>

  <td>UK</td>

</tr>

<tr>

  <td>Königlich Essen</td>

  <td>Brandenburg</td>

  <td>Germany</td>

</tr>

<tr>

  <td>Laughing Bacchus Wine Cellars</td>

  <td>Vancouver</td>

  <td>Canada</td>

</tr>

<tr>

  <td>Magazzini Alimentari Riuniti</td>

  <td>Bergamo</td>

  <td>Italy</td>

</tr>

<tr>

  <td>North/South</td>

  <td>London</td>

  <td>UK</td>

</tr>

<tr>

  <td>Paris spécialités</td>

  <td>Paris</td>

  <td>France</td>

</tr>

<tr>

  <td>Rattlesnake Canyon Grocery</td>

  <td>Albuquerque</td>

  <td>USA</td>

</tr>

<tr>

  <td>Simons bistro</td>

  <td>København</td>

  <td>Denmark</td>

</tr>

<tr>

  <td>The Big Cheese</td>

  <td>Portland</td>

  <td>USA</td>

  </tr>

<tr>

  <td>Vaffeljernet</td>

  <td>Århus</td>

  <td>Denmark</td>

</tr>

<tr>

  <td>Wolski Zajazd</td>

  <td>Warszawa</td>

  <td>Poland</td>

</tr>

</table>

<footer id="foot01"></footer>

</div>

<script src="script.js"></script>

</body>

</html>

Web Building - Adding Navigation

What We Will Do

In this chapter we will:

Add a navigation menu

edit script.js

add the following content into script.js

===================================

document.getElementById("nav01").innerHTML =

"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";

===============================================

edit your style sheet site.css

Add the following to the file content:

==================================

ul#menu {
    padding: 0;
    margin-bottom: 11px;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    color: white;
    background-color: black;
}

=================================

edit your index.html

add <nav id="nav01"></nav> into index.html

================================

=================================

Edit All Pages

edit customers.html and about.html

add <nav id="nav01"></nav>

Reference : http://www.w3schools.com/website/

php web 的一些基本研究

寫任何的程式....基本上都會有hello world.....

沒錯...用php來寫 web當然也要hello world....

開啟hello.php.....

路徑放在你的web server 的目錄下.....如果以 apache2 server來說...就是

/var/www/html/

填入以下的內容

<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>

用web browser
http://localhost/hello.php or http://127.0.0.1/hello.php

如果你有看到下面的Hello World...恭喜你....你成功了...

其實你的web browser接收到的是

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
 <p>Hello World</p>
 </body>
</html>

在<p>Hello World</p>
後面加入 <?php phpinfo(); ?>

就可以看到php 的 information.....

秀出變數的方法....
<?phpecho $_SERVER['HTTP_USER_AGENT'];?>

In the above example we printed an Array element
$_SERVER is just one variable that PHP automatically makes available to you

Example #2 Example using control structures and functions

<?phpif (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) {
echo 'You are using Internet Explorer.<br />';}
else{
echo 'You are not using Internet Explorer.<br />';
}?>

strpos() is a function built into PHP which searches a string for another string

Example #3 Mixing both HTML and PHP modes

<?phpif (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) {?><h3>strpos() must have returned non-false</h3>
<p>You are using Internet Explorer</p>
<?php} else {?><h3>strpos() must have returned false</h3>
<p>You are not using Internet Explorer</p>
<?php}?>

Dealing with Forms

<form action="action.php" method="post">
 <p>Your name: <input type="text" name="name" /></p>
 <p>Your age: <input type="text" name="age" /></p>
 <p><input type="submit" /></p>
</form>

action.php 的內容如下:
Hi <?php echo htmlspecialchars($_POST['name']); ?>.
You are <?php echo (int)$_POST['age']; ?> years old.

按下"提交"

echo htmlspecialchars($_POST['name']);

htmlspecchars -> 轉型成字串的type .... $_POST['name'] -> input type="text" name="name" 的變數內容

echo (int)$_POST['age'];

(int) -> 轉型成int 的type... $_POST['age'] -> input type="text" name="age"

Using old code with new versions of PHP

Two of the most important recent changes that affect old code are:

The old $HTTP_*_VARS arrays are not available as of PHP 5.4.0. The following superglobal arrays were introduced in PHP » 4.1.0. They are: $_GET, $_POST, $_COOKIE, $_SERVER, $_FILES, $_ENV, $_REQUEST, and $_SESSION.
External variables are no longer registered in the global scope by default. In other words, as of PHP » 4.2.0 the PHP directive register_globals is off by default in php.ini. The preferred method of accessing these values is via the superglobal arrays mentioned above. Older scripts, books, and tutorials may rely on this directive being on. If it were on, for example, one could use $id from the URL http://www.example.com/foo.php?id=42. Whether on or off, $_GET['id'] is available.

What's next?

http://talks.php.net/

中文字的substr

$text = $_POST['name'];
$text1 = mb_substr($text,0,1);
$text2 = mb_substr($text,1,1);

$text3 = mb_substr($text,2,1);

http://php.net/manual/en/function.mb-substr.php

PHP 5 Form Validation

Field	Validation Rules
Name	Required. + Must only contain letters and whitespace
E-mail	Required. + Must contain a valid email address (with @ and .)
Website	Optional. If present, it must contain a valid URL
Comment	Optional. Multi-line input field (textarea)
Gender	Required. Must select one

Text Fields

The name, email, and website fields are text input elements, and the comment field is a textarea. The HTML code looks like this:

Name: <input type="text" name="name">

E-mail: <input type="text" name="email">

Website: <input type="text" name="website">

Comment: <textarea name="comment" rows="5" cols="40"></textarea>

Radio Buttons

The gender fields are radio buttons and the HTML code looks like this:

Gender:

<input type="radio" name="gender" value="female">Female

<input type="radio" name="gender" value="male">Male

The Form Element

The HTML code of the form looks like this:

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Big Note on PHP Form Security

The $_SERVER["PHP_SELF"] variable can be used by hackers!

If PHP_SELF is used in your page then a user can enter a slash (/) and then some Cross Site Scripting (XSS) commands to execute.

	Cross-site scripting (XSS) is a type of computer security vulnerability typically found in Web applications. XSS enables attackers to inject client-side script into Web pages viewed by other users.

Assume we have the following form in a page named "test_form.php":

<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">

Now, if a user enters the normal URL in the address bar like "http://www.example.com/test_form.php", the above code will be translated to:

<form method="post" action="test_form.php">

Validate Form Data With PHP

The first thing we will do is to pass all variables through PHP's htmlspecialchars() function.

When we use the htmlspecialchars() function; then if a user tries to submit the following in a text field:

- this would not be executed, because it would be saved as HTML escaped code, like this:

The code is now safe to be displayed on a page or inside an e-mail.

We will also do two more things when the user submits the form:

Strip unnecessary characters (extra space, tab, newline) from the user input data (with the PHP trim() function)
Remove backslashes (\) from the user input data (with the PHP stripslashes() function)

The next step is to create a function that will do all the checking for us (which is much more convenient than writing the same code over and over again).

We will name the function test_input().

Now, we can check each $_POST variable with the test_input() function, and the script looks like this:

Example Explained

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<?php
// define variables and set to empty values
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $name = test_input($_POST["name"]);
   $email = test_input($_POST["email"]);
   $website = test_input($_POST["website"]);
   $comment = test_input($_POST["comment"]);
   $gender = test_input($_POST["gender"]);
}

function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}
?>

<h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
   Name: <input type="text" name="name">
   <br><br>
   E-mail: <input type="text" name="email">
   <br><br>
   Website: <input type="text" name="website">
   <br><br>
   Comment: <textarea name="comment" rows="5" cols="40"></textarea>
   <br><br>
   Gender:
   <input type="radio" name="gender" value="female">Female
   <input type="radio" name="gender" value="male">Male
   <br><br>
   <input type="submit" name="submit" value="Submit">
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

</body>
</html>

Reference : http://www.w3schools.com/php/php_form_validation.asp Reference : http://php.net/manual/en/tutorial.php

紀大帥的奇妙旅程

2016年2月9日星期二

wordpress 的一些文章

web building tutorial

What We Will Do

Edit the About Page

Adding Code (JavaScript)

What We Will Do

Create JavaScript

Edit the Home Page

Web Building - Adding a Data Page

What We Will Do

Create a Data Page

customers.html

Web Building - Adding Navigation

What We Will Do

Edit All Pages

php web 的一些基本研究

Dealing with Forms

Using old code with new versions of PHP

What's next?

PHP 5 Form Validation

Text Fields

Radio Buttons

The Form Element

Big Note on PHP Form Security

Validate Form Data With PHP

Example Explained

2016年2月9日 星期二

wordpress 的一些文章

web building tutorial

What We Will Do

Edit the About Page

Adding Code (JavaScript)

What We Will Do

Create JavaScript

Edit the Home Page

Web Building - Adding a Data Page

What We Will Do

Create a Data Page

customers.html

Web Building - Adding Navigation

What We Will Do

Edit All Pages

php web 的一些基本研究

Dealing with Forms

Using old code with new versions of PHP

What's next?

PHP 5 Form Validation

Text Fields

Radio Buttons

The Form Element

Big Note on PHP Form Security

Validate Form Data With PHP

Example Explained

2016年2月9日星期二