fudansswebfundamental · YanAndSoftWare · Mar 28, 2018 · Apr 4, 2018 · Apr 5, 2018 · May 7, 2018
diff --git a/.idea/fdu-17ss-web-lab.iml b/.idea/fdu-17ss-web-lab.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/Lab04.html b/Lab04.html
@@ -2,18 +2,99 @@
 <html lang="en">
 <head >
    <meta charset="utf-8">
-   <title>Lab 04</title>
+    <title>Lab 04</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/Lab04.css" />
 </head>
 <body>
 <header>
-     <h1>Share Your Travels</h1>
-     <p>let us know where you've been</p>
+    <h1>Share Your Travels</h1>
+    <p>let us know where you've been</p>
 </header>
 <main>
    <section>
-
+       <form>
+           <fieldset>
+               <legend>photo details</legend>
+               <table>
+                   <tr>
+                       <td colspan="2">
+                           <label for="title">Title</label>
+                           <input id="title" placeholder="Give your photo a descriptive name" name="title">
+                           <label for="title1">Description</label>
+                           <textarea id="title1" placeholder="Adding a rich description will help with search result" name="title" rows="6"></textarea>
+                       </td>
+                   </tr>
+                   <tr>
+                       <td>
+                           <label for="Continent">Continent</label><br>
+                           <select id="Continent" style="margin-bottom:0.5em ">
+                               <option>Choose continent</option>
+                               <option>Choose continent1</option>
+                               <option>Choose continent2</option>
+                               <option>Choose continent3</option>
+                           </select><br>
+                           <label for="Country">Country</label><br>
+                           <select id="Country" style="margin-bottom:0.5em ">
+                               <option>Choose country</option>
+                               <option>Choose country1</option>
+                               <option>Choose country2</option>
+                           </select><br>
+                           <label for="City">City</label><br>
+                           <input id="City" name="city">
+                       </td>
+                       <td>
+                           <div class="box">
+                               <label>Copytights?</label><br>
+                               <label>
+                               <input type="radio" name="Copyright" value="All rights reserved">All rights reserved
+                               </label>
+                               <br>
+                               <label>
+                               <input checked type="radio" name="Copyright" value="Creative Commons">Creative Commons
+                               </label>
+                           </div>
+                           <div class="box">
+                               <label >Creat Commons Types</label><br>
+                               <input type="checkbox" name="Creative Commons Types" value="Attribution">Attribution<br>
+                               <input type="checkbox" name="Creative Commons Types" value="Noncommercial">Noncommercial<br>
+                               <input type="checkbox" name="Creative Commons Types" value="No Derivative Works">No Derivative Works<br>
+                           </div>
+                       </td>
+                   </tr>
+                   <tr>
+                       <td colspan="2">
+                           <div class="rectangle">
+                           <label for="haha">I accept the software license<input id="haha" type="checkbox"></label>
+                           </div>
+                       </td>
+                   </tr>
+                   <tr>
+                       <td>
+                           <label for="Rate this photo">Rate this photo:</label><br>
+                           <input id="Rate this photo" type="number" style="width: 4em"><br>
+                           <label for="Color Collection">Color Collection</label><br>
+                           <input id="Color Collection" type="color" style="width: 4em"></td>
+                       <td>
+                           <div class="box">
+                               <label for="Date Taken">Date Taken:</label><br>
+                               <input id="Date Taken" type="date" style="width: 10em"><br>
+                               <label for="Time Taken">Time Taken:</label><br>
+                               <input id="Time Taken" type="time" style="width: 6em">
+                           </div>
+                       </td>
+                   </tr>
+                   <tr>
+                       <td colspan="2">
+                           <div class="rectangle">
+                               <input class="rounded" type="submit" value="提交">
+                               <input class="rounded" type="reset" value="Clear Form">
+                           </div>
+                       </td>
+                   </tr>
+               </table>
+           </fieldset>
+       </form>
    </section>
 </main>  
 

diff --git a/Lab06.html b/Lab06.html
@@ -4,7 +4,7 @@
 	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">
 	<title>Lab06</title>
 	<link href="css/Lab06.css" rel="stylesheet" />
-    <script src="js/data.js" type="text/JavaScript"></script>
+
 </head>
 
 <body>
@@ -15,4 +15,5 @@ <h2>Share Your Travels</h2>
 
 </div>
 </body>
+<script src="js/data.js" type="text/JavaScript"></script>
 </html>
diff --git a/Lab07.html b/Lab07.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Lab07</title>
+	<link rel="stylesheet" href="css/Lab07.css">
+</head>
+<body>
+<div>
+	<select class="select1" onchange="TheFirstSelect(this.value)">
+		<option value="SelectOne">SELECT ONE</option>
+		<option value="CreateTable">CREATE TABLE</option>
+		<option value="AddRow">ADD ROW</option>
+		<option value="DeleteRow">DELETE ROW</option>
+		<option value="DeleteTable">DELETE TABLE</option>
+	</select><br>
+	<div class="container">
+	</div>
+	<div class="LayTH"></div>
+	<div class="LayButton"></div>
+	<select class="select2">
+		<option>SELECT (default: last created)</option>
+	</select>
+	<div class="ShowTheForm">
+		<table>
+		</table>
+	</div>
+</div>
+</body>
+<script src="js/Lab07.js"></script>
+</html>
diff --git a/Lab08.php b/Lab08.php
@@ -18,13 +18,13 @@
 
 <body>
     <!-- include header here -->
-
+    <?php include 'header.inc.php'; ?>
     <!-- Page Content -->
     <main class="container">
         <div class="row">
 
         <!-- include left here -->          
-
+    <?php include 'left.inc.php'; ?>
             <div class="col-md-10">
                 <div class="jumbotron" id="postJumbo">
                     <h1>Posts</h1>
@@ -43,6 +43,7 @@
                     ?>
 
                 </div>  <!-- end post list -->
+
             </div>  <!-- end col-mid-10 -->
         </div>  <!-- end row -->
     </main>

diff --git a/Lab09.php b/Lab09.php
@@ -27,7 +27,7 @@
 
 <body>
     <?php include 'header.inc.php'; ?>
-    
+
 
 
     <!-- Page Content -->
@@ -37,13 +37,17 @@
         <div class="btn-group countryButtons" role="group" aria-label="...">
               <a role="button" class="btn btn-default" href="list.php">All</a>
 
-              <?php   
+              <?php
+              include 'travel-data.inc.php';
+              asort($countries);
+              foreach ($countries as $x=>$x_value){
+                  $thetitle ='<a href="list.php?country='.$x_value.'" role="button" class="btn btn-default">'.$x_value.'</a>';
+                  echo $thetitle;
+              }
               /* you will need to fill this place with appropriate PHP */
               /* hint: use array and loop */
               //the next line is an example
-              //<a href="list.php?country=Canada" role="button" class="btn btn-default"> Canada</a> 
-
-
+              //<a href="list.php?country=Canada" role="button" class="btn btn-default"> Canada</a>
               ?>
 
         </div>               
@@ -52,25 +56,33 @@
 
 		<ul class="caption-style-2">
 
-          <?php   
+          <?php
+          include 'travel-data.inc.php';
+          $id = "id";
+          $path = "path";
+          $title = "title";
+          foreach ($images as $x=>$x_value){
+              $img = '<li><a href="detail.php?id='.$x_value[$id].'" class="img-responsive"><img src="images/square/'.$x_value[$path].'" alt="'.$x_value[$title].'"><div class="caption"><div class="blur"></div><div class="caption-text"><h1>'.$x_value[$title].'</h1></div></div></a></li>';
+              echo $img;
+          }
           /* you will need to fill this place with appropriate PHP */ 
           /* hint: use array and loop */
           //the next lines are one of the elements
           //you need to fill the elements with data provided
 
 
-   //        <li>
-   //              <a href="detail.php?id=22" class="img-responsive">
-   //              	<img src="images/square/6114850721.jpg" alt="View of Cologne">
-   //              	<div class="caption">
-   //              		<div class="blur">
-   //              		</div>
-   //              		<div class="caption-text">
-   //              			<h1>View of Cologne</h1>
-   //              		</div>
-   //              	</div>
-   //              </a>
-			// </li>
+//           <li>
+//                 <a href="detail.php?id=22" class="img-responsive">
+//                 	<img src="images/square/6114850721.jpg" alt="View of Cologne">
+//                 	<div class="caption">
+//                 		<div class="blur">
+//                 		</div>
+//                 		<div class="caption-text">
+//                 			<h1>View of Cologne</h1>
+//                 		</div>
+//                 	</div>
+//                 </a>
+//			 </li>
           ?>
 
        </ul>       

diff --git a/Lab10.php b/Lab10.php
@@ -3,7 +3,7 @@
 
 //****** Hint ******
 //connect database and fetch data here
-
+$con = mysqli_connect("localhost",'root','','travel');
 
 ?>
 
@@ -43,10 +43,10 @@
                 <option value="0">Select Continent</option>
                 <?php
                 //Fill this place
-
+                $sal= 'SELECT ContinentCode,ContinentName From Continents ';
+                $result = mysqli_query($con, 'SELECT ContinentCode,ContinentName From Continents ');
                 //****** Hint ******
                 //display the list of continents
-
                 while($row = $result->fetch_assoc()) {
                   echo '<option value=' . $row['ContinentCode'] . '>' . $row['ContinentName'] . '</option>';
                 }
@@ -58,9 +58,13 @@
                 <option value="0">Select Country</option>
                 <?php 
                 //Fill this place
-
+                $sal= 'SELECT ISO,CountryName From Countries ';
+                $result = mysqli_query($con, $sal);
                 //****** Hint ******
-                /* display list of countries */ 
+                /* display list of countries */
+                while($row = $result->fetch_assoc()) {
+                    echo '<option value=' . $row['ISO'] . '>' . $row['CountryName'] . '</option>';
+                }
                 ?>
               </select>    
               <input type="text"  placeholder="Search title" class="form-control" name=title>
@@ -74,8 +78,32 @@
 
 		<ul class="caption-style-2">
             <?php 
-            //Fill this place
-
+            //Fill this place\
+            $result = mysqli_query($con,'SELECT ImageID, Title, Description, CountryCodeISO, ContinentCode, Path FROM ImageDetails');
+            while($row = $result->fetch_assoc()) {
+                $INPUT= '<li>
+                      <a href="detail.php?id='. $row["ImageID"] .'"class="img-responsive">
+                        <img src="images/square-medium/'.$row["Path"].'" alt="'.$row["Description"].'">
+                        <div class="caption">
+                          <div class="blur"></div>
+                          <div class="caption-text">
+                            <p>'.$row["Title"].'</p>
+                          </div>
+                        </div>
+                      </a>
+                    </li>';
+                if(isset($_GET["country"]) && $_GET["country"] != "0"){
+                    if($row["CountryCodeISO"] === $_GET["country"]){
+                        echo $INPUT;
+                    }
+                }else if(isset($_GET["continent"]) && $_GET["continent"] != "0"){
+                    if($row["ContinentCode"] === $_GET["continent"]){
+                        echo $INPUT;
+                    }
+                }else{
+                    echo $INPUT;
+                }
+            }
             //****** Hint ******
             /* use while loop to display images that meet requirements ... sample below ... replace ???? with field data
             <li>

diff --git a/css/Lab07.css b/css/Lab07.css
@@ -0,0 +1,24 @@
+body {
+    text-align: center;
+}
+
+.select1, .commit, .select2 {
+    width: 300px;
+}
+
+table {
+    margin: 0 auto;
+}
+
+th {
+    background-color: grey;
+    color: whitesmoke;
+}
+
+tr:nth-child(odd) td {
+    background-color: lightgrey;
+}
+
+td {
+    padding: 0 0.5em;
+}