[php入門] 1、從安裝開發環境環境到(庄B)做個炫酷的登陸應用


 

1.前言

本文適合想了解下web開發入門的小白~

最近在根據一個網上課程學習php,課程內說道:

php環境自己搭比較麻煩,可以用wamp集成開發環境,一鍵安裝即可。

 

2.安裝集成開發環境

下面是wamp下載路徑,我們選擇低版本的2.5~如果用在①中下載不了,可以點擊②中找到2.5版本的試着下載,如果都下載不了,可以直接下載我分享的一個:http://pan.baidu.com/s/1i5dfx8x

 

3.測試是否安裝成功

安裝好之后在桌面右下角會有:(綠色表示online,黃色表示offline)

PS:我之前在虛擬機中全新的win7 64位系統中安裝這個,結果起初報缺少dll,我找到的相關dll放入sys文件,又報0xc00007錯誤,網上找的方法都試了(下載個微軟的包、把更新的一個包卸載)都不行。目前這個系統安裝了VS2013,我懷疑可能是VS2013中包含了所需的東西!

接着在瀏覽器中輸入localhost:80則會顯示相應的頁面~

 

4.寫個helloword試試

寫php程序比較簡單,它不像c++那樣需要編譯,然后再運行~直接找到www目錄:(該目錄即為寫的web程序的代碼等資源存放的根目錄)

接着在該根目錄下新建一個test01文件夾,用來存放test1的hello world web程序的資源:

在其中新建一個a.php寫入如下代碼:

1 <?php
2 
3 echo 'hello world';

保存,在瀏覽器內輸入:http://localhost/test01/a.php

5.上面的hello world不裝B,下面的,很裝B

百毒隨便搜一個網頁登陸模板:(解壓打開包含一個index.html、一個CSS(樣式)、images(網頁中的圖片)

點擊index.html的是這樣的:(一般這個就是前段和美工給你的靜態頁),目前你點擊login是沒有效果的!

我們在www根目錄下新建一個test02文件夾,並把上面三個文件及文件夾復制到test02中,並對index.html稍作修改~

 1 <!DOCTYPE html>
 2 <html>    
 3 <head>
 4 <title>Login</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
 7 <meta name="keywords" content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates" />
 8 <link href="css/style.css" rel='stylesheet' type='text/css' />
 9 <!--webfonts-->
10 <link href='http://fonts.useso.com/css?family=PT+Sans:400,700,400italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
11 <link href='http://fonts.useso.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
12 <!--//webfonts-->
13 <script src="http://ajax.useso.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
14 </head>
15 <body>
16 <script>$(document).ready(function(c) {
17     $('.close').on('click', function(c){
18         $('.login-form').fadeOut('slow', function(c){
19               $('.login-form').remove();
20         });
21     });      
22 });
23 </script>
24  <!--SIGN UP-->
25  <h1>klasikal Login Form</h1>
26 <div class="login-form">
27     <div class="close"> </div>
28         <div class="head-info">
29             <label class="lbl-1"> </label>
30             <label class="lbl-2"> </label>
31             <label class="lbl-3"> </label>
32         </div>
33             <div class="clear"> </div>
34     <div class="avtar">
35         <img src="images/avtar.png" />
36     </div>
37             <form>
38                     <input type="text" class="text" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" >
39                         <div class="key">
40                     <input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
41                         </div>
42             </form>
43     <div class="signin">
44         <input type="submit" value="Login" >
45     </div>
46 </div>
47  <div class="copy-rights">
48     <p>Copyright &copy; 2015.beautifulzzzz All rights reserved.<a href="http://www.cnblogs.com/zjutlitao/" target="_blank"/a></p>
49  </div>
50 
51 </body>
52 </html>
修改前的
 1 <!DOCTYPE html>
 2 <html>    
 3 <head>
 4 <title>Login</title>
 5 <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
 6 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
 7 <meta name="keywords" content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates" />
 8 <link href="css/style.css" rel='stylesheet' type='text/css' />
 9 <!--webfonts-->
10 <link href='http://fonts.useso.com/css?family=PT+Sans:400,700,400italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
11 <link href='http://fonts.useso.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
12 <!--//webfonts-->
13 <script src="http://ajax.useso.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
14 </head>
15 <body>
16  <!--SIGN UP-->
17  <h1>beautifulzzzz Login Form</h1>
18     <div class="login-form">
19         <div class="close"> </div>
20             <div class="head-info">
21                 <label class="lbl-1"> </label>
22                 <label class="lbl-2"> </label>
23                 <label class="lbl-3"> </label>
24             </div>
25             <div class="clear"> </div>
26             <div class="avtar">
27                 <img src="images/avtar.png" />
28             </div>
29             <<form action="login.php" method="post">>
30                     <input type="text" class="text" name="NAME" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" >
31                     <input type="password" class="key" name="PASSWORD" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
32                     <input type="submit" class="signin" name="LOGIN" value="Login" >
33             </form>
34     </div>
35     <div class="copy-rights">
36         <p>Copyright &copy; 2015.beautifulzzzz All rights reserved.<a href="http://www.cnblogs.com/zjutlitao/" target="_blank"/a></p>
37     </div>
38 </body>
39 </html>
修改后的index.html

NOW!你在瀏覽器中輸入http://localhost/test02/index.html  會看到和之前點擊index.html一樣的效果?

哈哈,其實流程已經和之前的很不一樣了!之前就像你用文本編輯器打開一個txt文件一樣,現在則是你先得向網盤(服務器端)要(通過URL)這個文本,然后服務器端返回給你,你才能看到~

這時我們在test02目錄下新建一個login.php,並輸入:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <?php
 9         $name = $_POST["NAME"];
10         $pwd = $_POST["PASSWORD"];
11         $fp = fopen("./data.txt", "a");
12         $str = "user:".$name."&password:".$pwd."\n";
13         fwrite($fp,$str);
14         fclose($fp);
15         echo "<h1>歡迎".$name."<h1>";
16     ?>
17 </body>
18 </html>

這樣你在index.html頁面輸入用戶名和密碼后,點擊login按鈕就會觸發login.php執行(原因是這里:index.html)

而php代碼中通過$_POST來獲得index頁面post過來的內容,並將用戶名和密碼存儲在data.txt中,最后輸出歡迎信息~

(這一部分的詳細邏輯可以參考:http://www.cnblogs.com/chinajins/p/5622342.html

 

鏈接

http://pan.baidu.com/s/1gfGzg5d

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM