express and xhr #9

GSG-K3 · Feb 26, 2020 · 9d10b8c · 9d10b8c
2 parents 853971c + e17b2bd
commit 9d10b8c
Show file tree

Hide file tree

Showing 10 changed files with 339 additions and 28 deletions.
diff --git a/database/config/build.js b/database/config/build.js
@@ -0,0 +1,18 @@
+const fs = require("fs");
+const path = require("path");
+
+const dbConnection = require("./connection.js");
+
+
+const dbBuild = () => {
+    const sqlPath = readFileSync(join(__dirname, "build.sql")).toString();
+    return dbConnection.query(sql, (err, res) => {
+        if (err) throw new Error('error build.js');
+        else console.log('build sucsess');
+
+    });
+};
+
+
+
+module.exports = { dbBuild };
diff --git a/database/config/build.sql b/database/config/build.sql
@@ -0,0 +1,125 @@
+BEGIN; 
+
+DROP TABLE IF EXISTS students, teachers, grades, courses;
+
+
+CREATE TABLE IF NOT EXISTS courses(
+    course_id SERIAL   PRIMARY KEY,
+    course_title TEXT  NOT NULL
+
+);
+
+INSERT INTO courses (course_id, course_title) VALUES(1,'Physics'); 
+INSERT INTO courses (course_id, course_title) VALUES(2,'Maths'); 
+INSERT INTO courses (course_id, course_title) VALUES(3,'Chemistry'); 
+INSERT INTO courses (course_id, course_title) VALUES(4,'Arabic'); 
+INSERT INTO courses (course_id, course_title) VALUES(5,'Biology'); 
+INSERT INTO courses (course_id, course_title) VALUES(6,'coding'); 
+INSERT INTO courses (course_id, course_title) VALUES(7,'English'); 
+
+CREATE TABLE IF NOT EXISTS students(
+  student_id  SERIAL     PRIMARY KEY,
+  student_name TEXT  NOT NULL , 
+  student_birth INTEGER  NOT NULL,
+  student_sex  TEXT NOT NULL,
+  student_address TEXT NOT NULL , 
+  student_EMAIL VARCHAR(320), 
+  student_img VARCHAR(250) NOT NULL
+
+);
+
+INSERT INTO students (student_id , student_name, student_birth, student_sex, student_address,  student_EMAIL,student_img) VALUES (1,'Tasnin' , 8/8/1996, 'Female', 'Bethlehem' ,'[email protected]','https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.forbes.com%2Fsites%2Fangelauyeung%2F2019%2F10%2F24%2Fjeff-bezos-is-no-longer-the-richest-person-in-the-world%2F&psig=AOvVaw0aqN38lJLcC_x4z05J8o3B&ust=1582725738852000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPjl3f3u7OcCFQAAAAAdAAAAABAU');
+INSERT INTO students (student_id, student_name, student_birth, student_sex, student_address,  student_EMAIL,student_img) VALUES (2,'Matt' , 25/5/1995, 'Male', 'Bethlehem' ,'[email protected]','https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fperson%2F&psig=AOvVaw0aqN38lJLcC_x4z05J8o3B&ust=1582725738852000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPjl3f3u7OcCFQAAAAAdAAAAABAD');
+INSERT INTO students (student_id, student_name, student_birth, student_sex, student_address,  student_EMAIL,student_img) VALUES (3,'karmel' , 4/9/1996, 'Female', 'Bethlehem' ,'[email protected]','https://www.google.com/url?sa=i&url=https%3A%2F%2Fengineering.unl.edu%2Fkayla-person%2F&psig=AOvVaw0aqN38lJLcC_x4z05J8o3B&ust=1582725738852000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPjl3f3u7OcCFQAAAAAdAAAAABAb');
+INSERT INTO students (student_id, student_name, student_birth, student_sex, student_address,  student_EMAIL,student_img) VALUES (4,'Harry' , 17/11/1996, 'Male', 'Bethlehem' ,'[email protected]','https://www.google.com/url?sa=i&url=https%3A%2F%2Fp-upload.facebook.com%2Fnasdaily%2Fphotos%2F%3Fref%3Dpage_internal&psig=AOvVaw0aqN38lJLcC_x4z05J8o3B&ust=1582725738852000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPjl3f3u7OcCFQAAAAAdAAAAABAO');
+
+
+CREATE TABLE IF NOT EXISTS relation(
+relation_id SERIAL PRIMARY KEY,
+course_id INT ,
+FOREIGN KEY course_id REFERENCES courses (course_id) 
+student_id INT,
+FOREIGN KEY student_id REFERENCES students (student_id),
+
+);
+
+INSERT INTO relation( course_id , student_id) VALUES (1,1);
+INSERT INTO relation( course_id , student_id) VALUES (2,1);
+INSERT INTO relation( course_id , student_id) VALUES (3,1);
+INSERT INTO relation( course_id , student_id) VALUES (4,1);
+INSERT INTO relation( course_id , student_id) VALUES (5,1);
+INSERT INTO relation( course_id , student_id) VALUES (6,1);
+INSERT INTO relation( course_id , student_id) VALUES (7,1);
+INSERT INTO relation( course_id , student_id) VALUES (1,2);
+INSERT INTO relation( course_id , student_id) VALUES (2,2);
+INSERT INTO relation( course_id , student_id) VALUES (3,2);
+INSERT INTO relation( course_id , student_id) VALUES (4,2);
+INSERT INTO relation( course_id , student_id) VALUES (5,2);
+INSERT INTO relation( course_id , student_id) VALUES (6,2);
+INSERT INTO relation( course_id , student_id) VALUES (7,2);
+INSERT INTO relation( course_id , student_id) VALUES (1,3);
+INSERT INTO relation( course_id , student_id) VALUES (2,3);
+INSERT INTO relation( course_id , student_id) VALUES (3,3);
+INSERT INTO relation( course_id , student_id) VALUES (4,3);
+INSERT INTO relation( course_id , student_id) VALUES (5,3);
+INSERT INTO relation( course_id , student_id) VALUES (6,3);
+INSERT INTO relation( course_id , student_id) VALUES (7,3);
+INSERT INTO relation( course_id , student_id) VALUES (1,4);
+INSERT INTO relation( course_id , student_id) VALUES (2,4);
+INSERT INTO relation( course_id , student_id) VALUES (3,4);
+INSERT INTO relation( course_id , student_id) VALUES (4,4);
+INSERT INTO relation( course_id , student_id) VALUES (5,4);
+INSERT INTO relation( course_id , student_id) VALUES (6,4);
+INSERT INTO relation( course_id , student_id) VALUES (7,4);
+
+
+CREATE TABLE IF NOT EXISTS grades(
+    grade_id SERIAL  PRIMARY KEY,
+    grade_mark VARCHAR(50) ,
+    course_id INT ,
+    FOREIGN KEY course_id REFERENCES courses (course_id) ,
+    student_id INT,
+    FOREIGN KEY student_id REFERENCES students (student_id)
+);
+
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(84,1 ,1 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(90, 2 ,1 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(94,3 ,1 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(88,4,1 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(70,5 ,1 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(57,6 ,1 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(50,7,1 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(77,1 ,2);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(70,2 ,2);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(87,3 ,2);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(88,4,2);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(99,5 ,2);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(60,6 ,2);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(90,7,2);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(91,1 ,3 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(80,2 ,3 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(98,3 ,3 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(94,4,3 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(99,5 ,3 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(91,6 ,3 );
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(90,7,3);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(64,1 ,4);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(83,2 ,4);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(57,3 ,4);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(50,4,4);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(90,5 ,4);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(70,6 ,4);
+INSERT INTO grades( grade_mark , course_id , student_id) VALUES(88,7,4);
+
+
+
+
+
+CREATE TABLE IF NOT EXISTS teachers(
+    teacher_id SERIAL     PRIMARY KEY,
+    teacher_address TEXT ,
+    teacher_phone INTEGER
+
+);
+
+COMMIT;
diff --git a/database/config/connection.js b/database/config/connection.js
@@ -0,0 +1,19 @@
+require("env2")("./config.env");
+const { Pool } = require("pg");
+const url = '';
+
+let connectionString = process.env.DB_URL;
+
+if (process.env.NODE_ENV === "test") {
+    connectionString = process.env.TEST_DB_URL;
+}
+if (!connectionString) {
+    throw new Error("please set a DB_URL env variable");
+
+}
+const options = {
+    connectionString: url,
+    sll: true
+};
+
+module.exports = new Pool(options);
diff --git a/database/queries/getData.js b/database/queries/getData.js
@@ -0,0 +1,37 @@
+const dbConnection = require("../config/connection")
+
+// students, teachers, grades, courses
+
+const sqlStudent = "select * students"
+const sqlGrades = "select * grades"
+const sqlCourses = "select * courses"
+    // const sqlStudent = "select * students"
+
+const getdataStudent = callback => {
+    dbConnection.query(sqlStudent, (err, res) => {
+        if (err) console.log(err);
+        else {
+            // console.log(rows);
+            callback(err, res.rows);
+        }
+    });
+}
+const getdataGrades = callback => {
+    dbConnection.query(sqlGrades, (err, res) => {
+        if (err) console.log(err);
+        else {
+            // console.log(rows);
+            callback(err, res.rows);
+        }
+    });
+}
+const getdataCourses = callback => {
+    dbConnection.query(sqlCourses, (err, res) => {
+        if (err) console.log(err);
+        else {
+            // console.log(rows);
+            callback(err, res.rows);
+        }
+    });
+}
+module.exports = { getdataStudent, getdataGrades, getdataCourses }
diff --git a/public/dom.js b/public/dom.js
@@ -0,0 +1,12 @@
+const xhr = new XMLHttpRequest();
+const apicall = (method, url, callback) => {
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState == 4 && xhr.status == 200) {
+            let response = xhr.responseText
+            if (typeof callback === "function") callback(response)
+            else { console.log("error:", xhr.status, "|", xhr.readyState) }
+        }
+    }
+    xhr.open(method, url)
+    xhr.send()
+}
diff --git a/public/grades.html b/public/grades.html
@@ -1,21 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="style.css" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Anton&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+
     <title>Student Managment System</title>
-  </head>
-  <body>
+</head>
+
+<body>
     <section class="topsection">
-      <img src="./imges/school.png" alt="school picture" />
-      <h1>Student Managment System</h1>
+        <img src="./imges/school.png" alt="school picture" />
+        <h1>Student Managment System</h1>
     </section>
-    <section class="gradesTable"></section>
+
+    <form class="searchForm" action="page.php">
+        <input type="text" placeholder="Your ID Number.." name="search" />
+        <button type="submit">
+        <i class="fa fa-search" aria-hidden="true"></i>
+      </button>
+    </form>
+
+    <section class="gradesTable">
+        <table class="gradesTable_std">
+            <tr>
+                <th>Course</th>
+                <th>
+                    Grades
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    Math
+                </td>
+                <td>80</td>
+            </tr>
+        </table>
+    </section>
+
     <script src="dom.js"></script>
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/public/student.html b/public/student.html
@@ -2,11 +2,11 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <link rel="stylesheet" href="./style.css">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Student Managment System</title>
+    <link rel="stylesheet" href="./style.css" />
 </head>
 
 <body>
@@ -18,14 +18,14 @@ <h1>Student Managment System</h1>
     <section class="student">
         <form class="student_form">
             <div>
-                <input value="Type your ID" type="search" class="head_search">
+                <input value="Type your ID" type="search" class="head_search" />
             </div>
             <div>
-                <input value="submit" type="button" class="head_button">
+                <input value="submit" type="button" class="head_button" />
             </div>
         </form>
         <div class="student_profolio">
-            <img src="team-01.png" class="student_img">
+            <img src="./imges/student.png" class="student_img" />
             <div class="student_profolio_name">
                 <h2>Ali</h2>
                 <h3>ID:134223</h3>
@@ -36,8 +36,6 @@ <h3>location:</h3>
             <h3>birthday:</h3>
             <h3>sex:</h3>
             <h3>phone:</h3>
-
-
         </div>
     </section>
 </body>

diff --git a/public/style.css b/public/style.css
@@ -72,4 +72,52 @@
     height: 200px;
     margin-top: 36px;
     box-shadow: 30px 10px 10px 10px #aaaaaa;
+}
+
+.searchForm {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    margin-left: 56px;
+    padding-bottom: 5px;
+    padding-top: 10px;
+}
+
+.searchForm input {
+    height: 28px;
+    width: 46vw;
+    background: #f1f1f1;
+    border: none;
+}
+
+.searchForm button {
+    width: 76px;
+    height: 26px;
+    background-color: #4e9cc9;
+    color: beige;
+    font-size: 3vw;
+    border: none;
+}
+
+.gradesTable {
+    margin-left: 51px;
+    padding-top: 20px;
+}
+
+.gradesTable_std td,
+.gradesTable_std th {
+    border: 1px solid #ddd;
+    padding: 21px;
+    font-size: 25px;
+    text-align: center;
+}
+
+.gradesTable_std th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: #4e9cc9;
+    color: white;
+    font-size: 25px;
 }