FSWD16/index.php at master · mlanders/FSWD16 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<?php
session_start();
if (isset($_SESSION['id'])){
	$userId = $_SESSION['id'];
	$username = $_SESSION['username'];
}
else {
	header('Location: login/index.php');
	die();
}
?>
<!DOCTYPE html>

<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <!-- JQUERY -->
    <script src='https://code.jquery.com/jquery-3.3.1.js' integrity='sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60='
        crossorigin='anonymous'></script>
    <!-- Semantic-UI -->
    <link rel='stylesheet' text='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css'>
    <!-- Custom CSS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <!--font Awesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
        crossorigin="anonymous">
    <!--css-->
    <link rel="stylesheet" href="css/semantic.min.css">
    <link rel="stylesheet" href="css/style.css">


    <title>Lambda | Class 16</title>
</head>

<body onload="getStudents()">

 <!-- NAVBAR -->
    <nav id='push-down'>
        <div id="check" class="ui inverted attached stackable menu ">
            <div class="ui container ">
                <!-- fix this small issue, do a search but the home link was not responding. fixed-->
                <a class="item" href="index.html">
                    <i class="home icon"></i> Home
                </a>
                <a class="item">
                    <i class="grid layout icon"></i> Browse Projects
                </a>
            </div>
            <!-- SEARCH -->
            <div class="right menu">
                <div class='item'>
                    <form onkeydown='searchStudents()'>
                        <div class="ui transparent icon input">

                            <input id="search" class="prompt" type="text" placeholder=" Search students...">

                        </div>
                    </form>
                    <div class="results"></div>
                </div>
            </div>
        </div>
    </nav>

    <div id="main-container">
        <main>
            <div class="container">
                <div class='console-container'>
                    <span id='text'></span>
                    <div class='console-underscore' id='console'>&#95;</div>
                </div>
            </div>
            <div class="ui six doubling cards centered raised link student">
            </div>
        </main>

        <footer>

        </footer>
    </div> <!-- MAIN CONTAINER-->


    <script>
        var filter = '';
        function setFilter() {
            filter = document.getElementById('search').value.toUpperCase();
        }
        var studentList = [];
        getStudents = () => {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: 'students.json',
                success: data => {
                    data.map(student => {
                         $(".student").append(`
                            <div class="card">
                                <div class="image">
                                    <img src="${student.avatar}">
                                </div>
                                <div class="content">
                                    <a class="ui medium header">${student.name}</a>
                                    <a class='ui tiny header'>Location: ${student.location}</a>
                                </div>
                                <div class="item">
                                    <a class="" href="https://github.com/${student.githubHandle}"><i class="github icon"></i></a>
                                    <a class="" href="https://${student.website}"><i class="globe icon"></i></a>
                                </div>
                            </div>
                        `
                        )
                    })
                    createDataArray(data);
                },
            })
        }
        function createDataArray(data) {
            studentList = data;
        }
        // filtering function used with the json object retrieved from the AJAX call
        function filterStudents() {
            var cards = $('.card');
            for (var i = 0; i < studentList.length; i++) {
                if (studentList[i].name.toUpperCase().indexOf(filter) > -1) {
                    cards[i].style.display = "";
                } else {
                    cards[i].style.display = "none";
                }
            }
        }
        var mysql = require("mysql");
        var con = mysql.createConnection({
            host: "db4free.net",
            user: "fswd16",
            password: "lambdaschoolfswd16",
            database: "fswd16"
        });
        con.connect(function (err) {
            if (err) throw err;
            con.query("SELECT * FROM students", function (err, result, fields) {
                if (err) throw err;
                console.log(result);
            });
        });
    </script>
    <script src="js/script.js"></script>

</html>