├── README.md
├── ajax
    ├── function.php
    ├── login.php
    ├── rank.php
    ├── register.php
    ├── search.php
    ├── showall.php
    └── update.php
├── core
    ├── database.php
    └── function.php
├── css
    ├── login.css
    ├── main.css
    ├── register.css
    └── style.css
├── editprofil
    ├── edit.css
    ├── edit.js
    ├── edit.php
    ├── hapus.php
    └── index.php
├── forgot_password.php
├── forgot_password
    ├── ajax
    │   ├── password.php
    │   ├── reset.php
    │   └── user.php
    ├── forgot.css
    ├── index.php
    ├── js
    │   ├── reset.js
    │   └── user.js
    ├── reset.css
    └── reset_password.php
├── forum
    ├── ajax
    │   ├── chat.php
    │   ├── insertkomen.php
    │   └── loadmore.php
    ├── database.php
    ├── index.php
    ├── js
    │   ├── function.js
    │   ├── jquery.min.js
    │   └── script.js
    ├── style.css
    └── train-style.css
├── img
    ├── bg.jpg
    ├── eye-fill.svg
    ├── eye.svg
    ├── forum-bg.png
    ├── logo.png
    ├── logo2.png
    ├── math.png
    ├── pfp
    │   ├── pfp1.png
    │   ├── pfp10.png
    │   ├── pfp11.png
    │   ├── pfp12.png
    │   ├── pfp13.png
    │   ├── pfp14.png
    │   ├── pfp15.png
    │   ├── pfp16.png
    │   ├── pfp2.png
    │   ├── pfp3.png
    │   ├── pfp4.png
    │   ├── pfp5.png
    │   ├── pfp6.png
    │   ├── pfp7.png
    │   ├── pfp8.png
    │   └── pfp9.png
    └── word.png
├── index.php
├── js
    ├── data.js
    ├── function.js
    ├── jquery.min.js
    ├── login.js
    ├── main.js
    └── register.js
├── login.php
├── logout.php
└── register.php


/README.md:
--------------------------------------------------------------------------------
1 | # pweb
2 | Untuk yg terbaru masih belum saya push, 
3 | Jadi yg ini masih ada bugnya.
4 | 


--------------------------------------------------------------------------------
/ajax/function.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | include "../kamus.php";
 4 | 
 5 | 
 6 | function lowerArray(array $kamus){
 7 |     $dump = [];
 8 |     foreach($kamus as $k)
 9 |     {
10 |         strtolower($k);
11 |         array_push($dump,$k);
12 |     }
13 |     return $dump;
14 | }
15 | 
16 | 
17 | function cekKataArray(array $smpl)
18 | {
19 |     global $abjad;
20 |     $dumpText = [];
21 |     foreach($smpl as $v)
22 |     {
23 |         $dump = [];
24 |         $huruf = str_split($v);
25 |         foreach($huruf as $h){
26 |             if(in_array($h, $abjad)){
27 |                 array_push($dump,$h);
28 |             }
29 |             else{
30 |                 continue;
31 |             }
32 |         }
33 |         $kata = implode("",$dump);
34 |         array_push($dumpText,$kata);
35 |     }
36 |     return $dumpText;
37 | }
38 | 
39 | ?>


--------------------------------------------------------------------------------
/ajax/login.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../core/database.php";
 4 | session_start();
 5 | 
 6 | 
 7 | $con = new Database();
 8 | if(isset($_POST['username'])){
 9 |     $username = htmlspecialchars($_POST['username']);
10 |     $password = htmlspecialchars($_POST['password']);
11 |     $remember = $_POST['remember'];
12 | 
13 |     $lanjut = "false";
14 |     
15 |     if(strlen($username)<=0){
16 |         echo json_encode("Username kosong");
17 |     }
18 |     else if(strlen($password)<=0){
19 |         echo json_encode("Password kosong");
20 |     }
21 |     else if(strlen($username)>0 && strlen($password)>0){
22 |         $lanjut = "true";
23 |     }
24 |     
25 |     
26 |     if($lanjut == "true"){
27 |         $query = "SELECT * FROM user WHERE username = '{$username}'";
28 |         $con->query($query);
29 |         $res = $con->getSingle();
30 |         if($con->rowCount()==1){
31 |             if($password == $res['password']){
32 |                 if($remember != "false"){
33 |                     setcookie('username',$username, time()+3600,'/');
34 |                     setcookie('password',$password, time()+3600,'/');
35 |                 }
36 |                 
37 |                 $_SESSION['usertrainkey'] = $res['username'];
38 |                 $_SESSION['trainkey_id'] = $res['user_id'];
39 |                 echo json_encode("berhasil");
40 |             }else if($password != $res['password']){
41 |                 echo json_encode("Password salah");
42 |             }
43 |         }
44 |         else{
45 |             echo json_encode("User tidak ditemukan");
46 |         }
47 |     }
48 | }
49 | 
50 | ?>


--------------------------------------------------------------------------------
/ajax/rank.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../core/database.php";
 4 | session_start();
 5 | 
 6 | $con = new Database();
 7 | 
 8 | $query = "SELECT u.nick_name as 'nick_name', p.high_poin as 'high_poin', p.tanggal as 'tanggal'
 9 |             FROM poin as p 
10 |             JOIN user u USING(user_id) 
11 |             ORDER BY high_poin DESC, tanggal ASC
12 |             LIMIT 10";
13 | $con->query($query);
14 | $users = $con->getAssoc();
15 | 
16 | if(isset($_POST['limit'])){
17 |     $query = "SELECT u.nick_name as 'nick_name', p.high_poin as 'high_poin', p.tanggal as 'tanggal', u.profile_image , u.user_id as user_id
18 |     FROM poin as p 
19 |     JOIN user u USING(user_id) 
20 |     ORDER BY high_poin DESC, tanggal ASC
21 |     LIMIT 10";
22 |     $con->query($query);
23 |     $users = $con->getAssoc();
24 | }
25 | 
26 | ?>
27 | 
28 | <?php foreach($users as $k => $v) {?>
29 |     <?php if($v['user_id'] == $_SESSION['trainkey_id']){ ?>
30 |         <tr style="background-color:green;">
31 |             <td class="no"><?=$k+1 ?></td>
32 |             <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
33 |             <td class="img"><?=$v['nick_name'] ?></td>
34 |             <td class="data"><?=$v['high_poin'] ?></td>
35 |             <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
36 |         </tr>
37 |     <?php } ?>
38 |     <?php if($v['user_id'] != $_SESSION['trainkey_id']){ ?>
39 |         <tr>
40 |             <td class="no"><?=$k+1 ?></td>
41 |             <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
42 |             <td class="img"><?=$v['nick_name'] ?></td>
43 |             <td class="data"><?=$v['high_poin'] ?></td>
44 |             <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
45 |         </tr>
46 |     <?php } ?>
47 | <?php } ?>


--------------------------------------------------------------------------------
/ajax/register.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | session_start();
 4 | require_once "../core/database.php";
 5 | require_once "../core/function.php";
 6 | sesiLogin();
 7 | $con = new Database();
 8 | 
 9 | if(isset($_POST['password2'])){
10 |     $username = htmlspecialchars($_POST['username']);
11 |     $password = htmlspecialchars($_POST['password']);
12 |     $password2 = htmlspecialchars($_POST['password2']);
13 |     $nick_name = htmlspecialchars($_POST['nick_name']);
14 |     $profile_image = htmlspecialchars($_POST['profile_img']);
15 | 
16 |     $query = "SELECT * FROM user";
17 |     $con->query($query);
18 |     $users = $con->getAssoc();
19 |     
20 | 
21 |     foreach($users as $us){
22 |         if($us['username'] != $username){
23 |             $lanjut = "true";
24 |         }
25 |         else if($us['username'] == $username){
26 |             echo json_encode("Username sudah ada");
27 |             $lanjut = "false";
28 |             break;
29 |         }
30 |     }
31 |     
32 |     if($lanjut=="true"){
33 |         if($password!=$password2){
34 |             echo json_encode("Password tidak sama");
35 |         }
36 |         else if($password==$password2){
37 |             $query = "INSERT INTO user(username, password, current_password, nick_name, profile_image, last_login) VALUES ('$username','$password','$password2','$nick_name','$profile_image',NOW())";
38 |             $con->query($query);
39 |             $con->execute();
40 |             if($con->rowCount()==1){
41 |                 $query = "SELECT * FROM user WHERE username = '$username'";
42 |                 $con->query($query);
43 |                 $user = $con->getSingle();
44 | 
45 |                 $query = "insert into poin(user_id,high_poin,tanggal) VALUES ({$user['user_id']},0,NOW())";
46 |                 $con->query($query);
47 |                 $con->execute();
48 |                 echo json_encode("Berhasil");
49 |             }
50 |             else{
51 |                 echo json_encode("Gagal mendaftar");
52 |             }
53 |         }
54 |     }
55 | }
56 | 
57 | ?>
58 | 


--------------------------------------------------------------------------------
/ajax/search.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../core/database.php";
 4 | session_start();
 5 | 
 6 | $con = new Database();
 7 | $query = "SELECT u.*, p.* from user as u JOIN poin as p using(user_id)";
 8 | $con->query($query);
 9 | $users = $con->getAssoc();
10 | 
11 | if(isset($_POST['keyword'])){
12 |     $keyword = $_POST['keyword'];
13 |     $query = "SELECT u.*, p.* from user as u JOIN poin as p using(user_id) WHERE nick_name LIKE '%$keyword%' ORDER BY high_poin DESC, tanggal ASC";
14 |     $con->query($query);
15 |     $users = $con->getAssoc();
16 |     $_POST = [];
17 | }
18 | 
19 | ?>
20 | 
21 | 
22 | <?php foreach($users as $k => $v) {?>
23 |     <?php if($v['user_id'] == $_SESSION['trainkey_id']){ ?>
24 |         <tr style="background-color:green;">
25 |             <td class="no"><?=$k+1 ?></td>
26 |             <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
27 |             <td class="img"><?=$v['nick_name'] ?></td>
28 |             <td class="data"><?=$v['high_poin'] ?></td>
29 |             <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
30 |         </tr>
31 |     <?php } ?>
32 |     <?php if($v['user_id'] != $_SESSION['trainkey_id']){ ?>
33 |         <tr>
34 |             <td class="no"><?=$k+1 ?></td>
35 |             <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
36 |             <td class="img"><?=$v['nick_name'] ?></td>
37 |             <td class="data"><?=$v['high_poin'] ?></td>
38 |             <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
39 |         </tr>
40 |     <?php } ?>
41 | <?php } ?>


--------------------------------------------------------------------------------
/ajax/showall.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../core/database.php";
 4 | session_start();
 5 | 
 6 | $con = new Database();
 7 | $query = "SELECT u.*, p.* from user as u JOIN poin as p using(user_id)";
 8 | $con->query($query);
 9 | $users = $con->getAssoc();
10 | 
11 | if(isset($_POST['limit'])){
12 |     $query = "SELECT u.*, p.* from user as u JOIN poin as p using(user_id) ORDER BY high_poin DESC, tanggal ASC LIMIT {$_POST['limit']}";
13 |     $con->query($query);
14 |     $users = $con->getAssoc();
15 |     $_POST = [];
16 | }
17 | 
18 | if(isset($_POST['showall'])){
19 |     $query = "SELECT u.*, p.* from user as u JOIN poin as p using(user_id) ORDER BY high_poin DESC, tanggal ASC";
20 |     $con->query($query);
21 |     $users = $con->getAssoc();
22 |     $_POST = [];
23 | }
24 | ?>
25 | 
26 | 
27 | <?php foreach($users as $k => $v) {?>
28 |     <?php if($v['user_id'] == $_SESSION['trainkey_id']){ ?>
29 |         <tr style="background-color:green;">
30 |             <td class="no"><?=$k+1 ?></td>
31 |             <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
32 |             <td class="img"><?=$v['nick_name'] ?></td>
33 |             <td class="data"><?=$v['high_poin'] ?></td>
34 |             <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
35 |         </tr>
36 |     <?php } ?>
37 |     <?php if($v['user_id'] != $_SESSION['trainkey_id']){ ?>
38 |         <tr>
39 |             <td class="no"><?=$k+1 ?></td>
40 |             <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
41 |             <td class="img"><?=$v['nick_name'] ?></td>
42 |             <td class="data"><?=$v['high_poin'] ?></td>
43 |             <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
44 |         </tr>
45 |     <?php } ?>
46 | <?php } ?>


--------------------------------------------------------------------------------
/ajax/update.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../core/database.php";
 4 | $db = new Database();
 5 | session_start();
 6 | // mysqli_connect();
 7 | 
 8 | 
 9 | 
10 | if(isset($_POST['update'])){
11 |     $query = "UPDATE poin 
12 |         SET high_poin = {$_POST['highpoin']},
13 |         tanggal = NOW()
14 |         WHERE user_id = {$_POST['user_id']}";
15 |     $db->query($query);
16 |     $db->execute();
17 | 
18 |     $query = "SELECT * FROM poin where user_id = {$_POST['trainkey_id']}";
19 |     $db->query($query);
20 |     echo json_encode($db->getSingle());
21 | }
22 | else if(!isset($_POST['update'])){
23 |     $query = "SELECT * FROM poin where user_id = 1";
24 |     $db->query($query);
25 |     echo json_encode($db->getSingle());
26 | }
27 | 
28 | ?>


--------------------------------------------------------------------------------
/core/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class Database{
 4 |     private $con,$stmt;
 5 |     public function __construct()
 6 |     {
 7 |         try{
 8 |             $this->con = new PDO("mysql:host=localhost;dbname=uas212410102033;",'tia212410102033','ganti cuy',[PDO::ATTR_PERSISTENT=>true,PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION]);
 9 |         }catch(PDOException $e){
10 |             die($e->getMessage());
11 |             exit();
12 |         }
13 |     }
14 |     
15 |     public function query(string $query)
16 |     {
17 |         $this->stmt = $this->con->prepare($query);
18 |     }
19 | 
20 |     public function execute()
21 |     {
22 |         $this->stmt->execute();
23 |     }
24 | 
25 |     public function getAssoc()
26 |     {
27 |         $this->stmt->execute();
28 |         return $this->stmt->fetchAll(PDO::FETCH_ASSOC);
29 |     }
30 | 
31 |     public function getSingle()
32 |     {
33 |         $this->stmt->execute();
34 |         return $this->stmt->fetch(PDO::FETCH_ASSOC);
35 |     }
36 |     
37 |     public function rowCount()
38 |     {
39 |         return $this->stmt->rowCount();
40 |     }
41 | }
42 | 
43 | ?>
44 | 


--------------------------------------------------------------------------------
/core/function.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | function cekSesi(string $location){
 3 |     session_start();
 4 |     if(!isset($_SESSION['trainkey_id'])){
 5 |         header("Location: $location");
 6 |     }
 7 |     // echo "cek sesi";
 8 | }
 9 | 
10 | function sesiLogin(){
11 |     session_start();
12 |     if(isset($_SESSION['trainkey_id'])){
13 |         header("https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/");
14 |         exit;
15 |     }
16 | }
17 | ?>


--------------------------------------------------------------------------------
/css/login.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Color:
  3 | #6C4AB6
  4 | #8D72E1
  5 | #8D9EFF
  6 | #B9E0FF
  7 | #FFE15D
  8 | */
  9 | 
 10 | 
 11 | *{
 12 |     font-family: 'Poppins', sans-serif;
 13 |     box-sizing: border-box !important;
 14 |     color: #6C4AB6;
 15 | }
 16 | body{
 17 |     margin: 0;
 18 |     padding: 0;
 19 |     background-color: #6C4AB6;
 20 | }
 21 | a{
 22 |     text-decoration: none;
 23 |     color: inherit;
 24 | }
 25 | 
 26 | 
 27 | 
 28 | 
 29 | /* Navbar */
 30 | .brand{
 31 |     width: 100%;
 32 |     /* background-color: red; */
 33 |     padding: 1px;
 34 |     padding-left: 20px;
 35 |     display: flex;
 36 |     align-items: center;
 37 |     justify-content: start;
 38 | }
 39 | .brand h1, .nav-list p{
 40 |     color: #eee;
 41 | }
 42 | /* End Navbar */
 43 | 
 44 | 
 45 | 
 46 | /* Form login */
 47 | .login-container{
 48 |     width: 100%;
 49 |     height: 100vh;
 50 |     display: flex;
 51 |     align-items: center;
 52 |     justify-content: center;
 53 | }
 54 | .card-container{
 55 |     width: 40%;
 56 |     background-color: #fff;
 57 |     display: flex;
 58 |     flex-direction: column;
 59 |     align-items: center;
 60 |     justify-content: center;
 61 |     border-radius: 10px;
 62 |     padding: 20px;
 63 |     padding-bottom: 50px;
 64 | }
 65 | 
 66 | 
 67 | .form-container{
 68 |     width: 100%;
 69 |     height: 80%;
 70 |     display: flex;
 71 |     flex-direction: column;
 72 |     align-items: center;
 73 |     justify-content: space-evenly;
 74 | }
 75 | .form-content{
 76 |     width: 80%;
 77 |     display: flex;
 78 |     flex-direction: column;
 79 |     align-items: flex-start;
 80 |     justify-content: center;
 81 |     padding: 10px 0;
 82 | }
 83 | label{
 84 |     max-width: 30%;
 85 | }
 86 | input{
 87 |     height: 44px;
 88 |     width: 100%;
 89 |     border-radius: 10px;
 90 |     border: none;
 91 |     border-bottom: 1px solid #6C4AB6;
 92 |     border: 1px solid #6C4AB6;
 93 |     padding: 10px 15px;
 94 |     outline: none;
 95 |     box-sizing: border-box;
 96 |     transition: 0.3s;
 97 | }
 98 | input::placeholder{
 99 |     color: #aaa;
100 | }
101 | input:focus{
102 |     box-shadow: 0 0 3px #6C4AB6;
103 | }
104 | 
105 | button{
106 |     width: 100px;
107 |     height: 44px;
108 |     margin: 10px 0;
109 |     background-color: #6C4AB6;
110 |     color: #eee;
111 |     border: none;
112 |     border-radius: 20px;
113 |     cursor: pointer;
114 | }
115 | 
116 | 
117 | legend{
118 |     padding: 5px 0;
119 |     width: 80%;
120 |     font-size: 12px;
121 |     display: flex;
122 |     justify-content: space-between;
123 | }
124 | 
125 | .password{
126 |     position: relative;
127 | }
128 | #showpassword{
129 |     cursor: pointer;
130 |     position: absolute;
131 |     top: 57%;
132 |     right: 10px;
133 | }
134 | 
135 | 
136 | 
137 | .password{
138 |     padding-bottom: 5px;
139 | }
140 | 
141 | .remember{
142 |     width: 80%;
143 |     display: flex;
144 |     flex-direction: row;
145 |     justify-content: flex-start;
146 |     align-items: center;
147 |     padding: 0;
148 |     padding-bottom: 5px;
149 |     font-size: 12px;
150 |     /* background-color: blue; */
151 | }
152 | .remember input[type="checkbox"]{
153 |     width: 10px;
154 |     height: 10px;
155 | }
156 | .remember label{
157 |     width: 90%;
158 |     /* background-color: red; */
159 |     height: 100%;
160 | }


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
  1 | /* Body */
  2 | 
  3 | body{
  4 |     background-color: #8D72E1;
  5 |     background: #aaa;
  6 |     background: url("../img/bg.jpg");
  7 |     background-size: cover;
  8 |     background-position-y: 100vh;
  9 | }
 10 | /* End Body */
 11 | 
 12 | 
 13 | /* table */
 14 | table{
 15 |     border-collapse: collapse;
 16 | }
 17 | tbody{
 18 |     width: 100%;
 19 | }
 20 | td{
 21 |     font-size: 14px;
 22 |     border: 1px solid #eee;
 23 | }
 24 | .col1{
 25 |     padding-left: 20px;
 26 |     width: 50%;
 27 |     border: none;
 28 | }
 29 | .col2{
 30 |     width: 50%;
 31 |     padding-right: 20px;
 32 |     text-align: right;
 33 |     border: none;
 34 | }
 35 | /* End Table */
 36 | 
 37 | 
 38 | 
 39 | /* Profile menu */
 40 | .profile-menu{
 41 |     opacity: 0;
 42 |     width: 200px;
 43 |     background-color: #8D72E1;
 44 |     position: fixed;
 45 |     right: 50px;
 46 |     top: 65px;
 47 |     display: none;
 48 |     flex-direction: column;
 49 |     border-radius: 10px 0 10px 10px;
 50 |     transition: 0.1s;
 51 | }
 52 | .menu{
 53 |     padding: 10px;
 54 | }
 55 | .menu:nth-child(2){
 56 |     border-radius: 0 0 10px 10px;
 57 |     background-color: rgb(207, 57, 57);
 58 | }
 59 | #profile{
 60 |     transition: 0.3s;
 61 | }
 62 | /* End Profile menu */
 63 | 
 64 | 
 65 | 
 66 | /* Box Container */
 67 | .box-container{
 68 |     padding-top: 80px;
 69 |     /* background-color: #fff; */
 70 |     width: 100%;
 71 |     display: flex;
 72 |     justify-content: center;
 73 |     align-items: flex-start;
 74 | }
 75 | .itembox1{
 76 |     width: 25%;
 77 |     padding: 10px;
 78 | }
 79 | .itembox2{
 80 |     width: 50%;
 81 | }
 82 | .itembox3{
 83 |     width: 25%;
 84 | }
 85 | /* End Box Container */
 86 | 
 87 | 
 88 | 
 89 | /* Rank Container */
 90 | .rank-container{
 91 |     padding: 10px;
 92 |     border-radius: 10px;
 93 |     height: 60vh;
 94 |     display: flex;
 95 |     flex-direction: column;
 96 |     justify-content: start;
 97 |     align-items: center;
 98 |     overflow-y: scroll;
 99 |     background-color: #eee;
100 | }
101 | .rank-container h3{
102 |     color: #6C4AB6;
103 | }
104 | ::-webkit-scrollbar{
105 |     width: 12px;
106 | }
107 | ::-webkit-scrollbar-track {
108 |     background-color: #8D72E1;
109 |     box-shadow: inset 0 0 5px grey;
110 |     border-radius: 0 10px 10px 0;
111 | }
112 | ::-webkit-scrollbar-thumb{
113 |     background: #6C4AB6;
114 |     box-shadow: inset 0 0 5px grey;
115 |     border-radius: 10px;
116 | }
117 | ::-webkit-scrollbar-thumb:hover{
118 |     background-color: #8062c2;
119 | }
120 | .rank{
121 |     width: 100%;
122 |     max-width: 100%;
123 |     border-radius: 10px;
124 |     background-color: #6C4AB6;
125 |     overflow: hidden;
126 | }
127 | .rank tbody{
128 |     overflow: scroll;
129 | }
130 | .rank td{
131 |     border: none;
132 | }
133 | .rank-body .no{
134 |     width: 10%;
135 | }
136 | .rank-body td{
137 |     border: none;
138 | }
139 | .rank-body .img{
140 |     display: flex;
141 |     align-items: center;
142 | }
143 | .rank td{
144 |     padding: 5px;
145 | }
146 | .showall{
147 |     cursor: pointer;
148 |     color: #6C4AB6;
149 | }
150 | /* End Rank Container */
151 | 
152 | 
153 | 
154 | /* Game */
155 | .game-container{
156 |     /* background-color: green; */
157 |     padding: 10px;
158 |     display: flex;
159 |     flex-direction: column;
160 |     align-items: center;
161 |     justify-content: space-between;
162 | }
163 | /* End Game */
164 | 
165 | 
166 | 
167 | /* Teks Label */
168 | .teksLabel{
169 |     width: 80%;
170 |     padding: 20px;
171 |     background-color: #eee;
172 |     border-radius: 10px;
173 |     display: flex;
174 |     align-items: center;
175 |     justify-content: center;
176 |     flex-wrap: wrap;
177 |     box-sizing: border-box;
178 | }
179 | .teksLabel p{
180 |     color: #6C4AB6 !important;
181 | }
182 | /* Teks Label */
183 | 
184 | 
185 | 
186 | /* Score */
187 | .score-container{
188 |     padding: 10px;
189 |     height: 100%;
190 | }
191 | 
192 | .score{
193 |     opacity: 1;
194 |     width: 100%;
195 |     background-color: #eee;
196 |     border-radius: 10px;
197 | }
198 | .score *{
199 |     color: #6C4AB6;
200 | }
201 | /* Score */
202 | 
203 | 
204 | 
205 | 
206 | /* User Input */
207 | #userInput{
208 |     text-align: center;
209 |     width: 80%;
210 |     height: 44px;
211 |     padding: 10px;
212 |     margin: 10px 0;
213 |     background-color: #8D72E1;
214 |     border-radius: 20px;
215 |     border: none;
216 |     /* border: 3px solid rgba(255, 255, 255, .8); */
217 | }
218 | input:focus{
219 |     border: none;
220 | }
221 | input::placeholder{
222 |     color: #eee;
223 | }
224 | /* End User Input */
225 | 
226 | 
227 | 
228 | /* Timer */
229 | .timer{
230 |     width: 100%;
231 |     /* background-color: yellow; */
232 |     display: flex;
233 |     justify-content: space-evenly;
234 |     align-items: center;
235 | }
236 | .timerTeks{
237 |     font-size: 32px;
238 |     display: flex;
239 |     align-items: center;
240 |     justify-content: center;
241 |     height: 100px;
242 |     width: 100px;
243 |     background-color: #6C4AB6;
244 |     border-radius: 50%;
245 | }
246 | 
247 | #restart{
248 |     background-color: #6C4AB6;
249 |     border: none;
250 |     padding: 10px 20px;
251 |     border-radius: 20px;
252 |     cursor: pointer;
253 | }
254 | /* End Timer */
255 | 
256 | 
257 | 
258 | #search{
259 |     margin: 10px 0;
260 |     width: 100%;
261 |     border-radius: 10px;
262 |     outline: none;
263 |     border: none;
264 |     padding: 10px;
265 |     padding-left: 20px;
266 |     color: #8D72E1;
267 |     box-shadow: 0 0 2px #8D72E1;
268 |     transition: 0.3s;
269 | }
270 | #search:focus{
271 |     box-shadow: 0 0 5px #8D72E1;
272 | }
273 | #search::placeholder{
274 |     padding: 0;
275 |     color: #8D72E1;
276 | }


--------------------------------------------------------------------------------
/css/register.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Color:
  3 | #6C4AB6
  4 | #8D72E1
  5 | #8D9EFF
  6 | #B9E0FF
  7 | #FFE15D
  8 | */
  9 | 
 10 | 
 11 | 
 12 | /* Setting Font & Utility */
 13 | *{
 14 |     font-family: 'Poppins', sans-serif;
 15 |     box-sizing: border-box;
 16 |     color: #F49D1A;
 17 |     color: #6C4AB6;
 18 | }
 19 | body{
 20 |     width: 100%;
 21 |     margin: 0;
 22 |     padding: 80px 0;
 23 |     background-color: #6C4AB6;
 24 |     /* background: url("../img/bg.jpg");
 25 |     background-size: cover;
 26 |     background-position-y: 100vh; */
 27 | }
 28 | a{
 29 |     text-decoration: none;
 30 |     color: inherit;
 31 | }
 32 | /* End Font & Utility */
 33 | 
 34 | 
 35 | 
 36 | /* Navbar */
 37 | .brand{
 38 |     width: 100%;
 39 |     padding: 10px;
 40 |     padding-left: 20px;
 41 |     display: flex;
 42 |     justify-content: start;
 43 |     align-items: center;
 44 |     /* background-color: red; */
 45 | }
 46 | .brand h1, .nav-list p{
 47 |     color: #eee;
 48 | }
 49 | /* End Navbar */
 50 | 
 51 | 
 52 | 
 53 | /* Form login */
 54 | .login-container{
 55 |     width: 100%;
 56 |     display: flex;
 57 |     align-items: center;
 58 |     justify-content: center;
 59 | }
 60 | .card-container{
 61 |     width: 50%;
 62 |     background-color: #fff;
 63 |     display: flex;
 64 |     flex-direction: column;
 65 |     align-items: center;
 66 |     justify-content: center;
 67 |     border-radius: 10px;
 68 |     padding: 10px;
 69 | }
 70 | 
 71 | 
 72 | .form-container{
 73 |     /* background-color: blue; */
 74 |     width: 100%;
 75 |     height: 80%;
 76 |     /* overflow-y: scroll; */
 77 |     display: flex;
 78 |     flex-direction: column;
 79 |     align-items: center;
 80 |     justify-content: space-evenly;
 81 | }
 82 | .form-content{
 83 |     /* background-color: red; */
 84 |     width: 80%;
 85 |     display: flex;
 86 |     flex-direction: column;
 87 |     align-items: flex-start;
 88 |     justify-content: center;
 89 |     padding: 5px 0;
 90 | }
 91 | input{
 92 |     height: 44px;
 93 |     width: 100%;
 94 |     border-radius: 10px;
 95 |     border: none;
 96 |     border-bottom: 1px solid #6C4AB6;
 97 |     border: 1px solid #6C4AB6;
 98 |     padding: 10px 15px;
 99 |     outline: none;
100 |     box-sizing: border-box;
101 | }
102 | input::placeholder{
103 |     color: #aaa;
104 | }
105 | 
106 | button{
107 |     width: 100px;
108 |     height: 44px;
109 |     margin: 10px 0;
110 |     background-color: #6C4AB6;
111 |     color: #eee;
112 |     border: none;
113 |     border-radius: 20px;
114 |     cursor: pointer;
115 | }
116 | 
117 | 
118 | 
119 | 
120 | 
121 | /* Profile */
122 | .form-profile{
123 |     width: 80%;
124 |     display: flex;
125 |     align-items: center;
126 |     justify-content: start;
127 |     flex-wrap: wrap;
128 |     border: 1px solid #6C4AB6;
129 |     margin: 10px 0;
130 |     border-radius: 10px;
131 | }
132 | .profile-img{
133 |     width: 40px;
134 |     cursor: pointer;
135 | }
136 | #preview-profile{
137 |     transition: 0.3s;
138 | }
139 | label{
140 |     display: block;
141 |     padding: 5px;
142 | }
143 | input[type="radio"]{
144 |     cursor: pointer;
145 |     display: none;
146 |     border: none;
147 |     outline: none;
148 | }
149 | /* End Profile */


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* Setting Font & Utility */
  2 | @import url('https://fonts.googleapis.com/css2?family=Poppins');
  3 | *{
  4 |     font-family: 'Poppins', sans-serif;
  5 |     box-sizing: border-box !important;
  6 |     color: #B9E0FF;
  7 |     color: #eee;
  8 | }
  9 | body{
 10 |     margin: 0;
 11 |     padding: 0;
 12 |     width: 100%;
 13 |     background-color: #6C4AB6;
 14 | }
 15 | a{
 16 |     text-decoration: none;
 17 |     color: inherit;
 18 | }
 19 | 
 20 | 
 21 | 
 22 | /* Notify */
 23 | .notify{
 24 |     position: fixed;
 25 |     right: 0;
 26 |     right: -200px;
 27 |     top: 100px;
 28 |     max-width: 30vw;
 29 |     padding: 0;
 30 |     overflow: hidden;
 31 |     text-align: right;
 32 |     padding: 10px 20px;
 33 |     background-color: #eee;
 34 |     border-radius: 10px 0 20px 10px;
 35 |     transition: 0.3s;
 36 |     display: flex;
 37 |     flex-wrap: wrap;
 38 |     align-items: center;
 39 |     justify-content: center;
 40 | }
 41 | /* End Notify */
 42 | 
 43 | 
 44 | /* CSS */
 45 | .text-center{
 46 |     text-align: center;
 47 | }
 48 | 
 49 | .flex{
 50 |     display: flex;
 51 |     align-items: center;
 52 |     justify-content: center;
 53 | }
 54 | .justify-content-space-around{
 55 |     justify-content: space-around;
 56 | }
 57 | .justify-content-space-evenly{
 58 |     justify-content: space-evenly;
 59 | }
 60 | 
 61 | .container{
 62 |     width: 100%;
 63 | }
 64 | 
 65 | .container-fluid{
 66 |     width: 90%;
 67 | }
 68 | 
 69 | 
 70 | /* Navbar */
 71 | .nav{
 72 |     position: fixed;
 73 |     top: 0;
 74 |     width: 100%;
 75 |     height: 80px;
 76 |     display: flex;
 77 |     justify-content: space-evenly;
 78 |     align-items: center;
 79 |     /* background-color: yellow; */
 80 | }
 81 | .brand{
 82 |     width: 30%;
 83 |     /* background-color: red; */
 84 |     padding: 10px;
 85 |     padding-left: 20px;
 86 |     display: flex;
 87 |     align-items: center;
 88 |     justify-content: start;
 89 | }
 90 | .sub-nav{
 91 |     /* background-color: blue; */
 92 |     width: 60%;
 93 |     font-size: 16;
 94 |     display: flex;
 95 |     justify-content: end;
 96 |     overflow: hidden;
 97 | }
 98 | .nav-list{
 99 |     padding: 0 15px;
100 |     height: 40px;
101 |     margin: 0 10px;
102 |     text-align: center;
103 |     display: flex;
104 |     align-items: center;
105 |     border-radius: 20px;
106 |     box-sizing: border-box;
107 |     transition: .3s;
108 | }
109 | .nav-list:hover{
110 |     background-color: #8D72E1;
111 |     cursor: pointer;
112 | }
113 | 
114 | .profile-container{
115 |     /* width: 5%; */
116 |     display: flex;
117 |     align-items: center;
118 |     justify-content: center;
119 | }
120 | .profile{
121 |     width: 40px;
122 |     height: 40px;
123 |     border-radius: 50%;
124 |     background-color: #6C4AB6;
125 |     cursor: pointer;
126 |     box-shadow: 0 0 3px #fff;
127 | }
128 | 
129 | 
130 | 
131 | 


--------------------------------------------------------------------------------
/editprofil/edit.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Color:
  3 | #6C4AB6
  4 | #8D72E1
  5 | #8D9EFF
  6 | #B9E0FF
  7 | #FFE15D
  8 | */
  9 | 
 10 | 
 11 | 
 12 | /* Setting Font & Utility */
 13 | *{
 14 |     font-family: 'Poppins', sans-serif;
 15 |     box-sizing: border-box;
 16 |     color: #6C4AB6;
 17 | }
 18 | body{
 19 |     width: 100%;
 20 |     margin: 0;
 21 |     padding: 80px 0;
 22 |     background-color: #6C4AB6;
 23 | }
 24 | a{
 25 |     text-decoration: none;
 26 |     color: inherit;
 27 | }
 28 | /* End Font & Utility */
 29 | 
 30 | 
 31 | 
 32 | /* Navbar */
 33 | .nav{
 34 |     background-color: #6C4AB6;
 35 | }
 36 | .brand h1, .nav-list p{
 37 |     color: #eee;
 38 | }
 39 | /* End Navbar */
 40 | 
 41 | 
 42 | 
 43 | /* Form login */
 44 | .login-container{
 45 |     width: 100%;
 46 |     display: flex;
 47 |     align-items: center;
 48 |     justify-content: center;
 49 | }
 50 | .card-container{
 51 |     width: 50%;
 52 |     background-color: #fff;
 53 |     display: flex;
 54 |     flex-direction: column;
 55 |     align-items: center;
 56 |     justify-content: center;
 57 |     border-radius: 10px;
 58 |     padding: 10px;
 59 | }
 60 | 
 61 | 
 62 | .form-container{
 63 |     /* background-color: blue; */
 64 |     width: 100%;
 65 |     height: 80%;
 66 |     /* overflow-y: scroll; */
 67 |     display: flex;
 68 |     flex-direction: column;
 69 |     align-items: center;
 70 |     justify-content: space-evenly;
 71 | }
 72 | .form-content{
 73 |     /* background-color: red; */
 74 |     width: 80%;
 75 |     display: flex;
 76 |     flex-direction: column;
 77 |     align-items: flex-start;
 78 |     justify-content: center;
 79 |     padding: 5px 0;
 80 | }
 81 | input{
 82 |     height: 44px;
 83 |     width: 100%;
 84 |     border-radius: 10px;
 85 |     border: none;
 86 |     border-bottom: 1px solid #6C4AB6;
 87 |     border: 1px solid #6C4AB6;
 88 |     padding: 10px 15px;
 89 |     outline: none;
 90 |     box-sizing: border-box;
 91 | }
 92 | input::placeholder{
 93 |     color: #aaa;
 94 | }
 95 | 
 96 | button{
 97 |     width: 100px;
 98 |     height: 44px;
 99 |     margin: 10px 0;
100 |     background-color: #6C4AB6;
101 |     color: #eee;
102 |     border: none;
103 |     border-radius: 20px;
104 |     cursor: pointer;
105 | }
106 | 
107 | 
108 | 
109 | 
110 | 
111 | /* Profile */
112 | .form-profile{
113 |     width: 80%;
114 |     display: flex;
115 |     align-items: center;
116 |     justify-content: start;
117 |     flex-wrap: wrap;
118 |     border: 1px solid #6C4AB6;
119 |     margin: 10px 0;
120 |     border-radius: 10px;
121 | }
122 | .profile-img{
123 |     width: 40px;
124 |     cursor: pointer;
125 | }
126 | label{
127 |     display: block;
128 |     padding: 5px;
129 | }
130 | input[type="radio"]{
131 |     cursor: pointer;
132 |     display: none;
133 |     border: none;
134 |     outline: none;
135 | }
136 | /* End Profile */
137 | 
138 | 
139 | /* Hapus Button */
140 | #hapusbtn{
141 |     cursor: pointer;
142 | }
143 | /* End Hapus Button */
144 | 
145 | 
146 | 
147 | 
148 | /* Show Password */
149 | .password{
150 |     position: relative;
151 | }
152 | #showpassword{
153 |     cursor: pointer;
154 |     position: absolute;
155 |     top: 57.5%;
156 |     right: 10px;
157 | }
158 | /* End Show Password */


--------------------------------------------------------------------------------
/editprofil/edit.js:
--------------------------------------------------------------------------------
  1 | let editbtn = document.getElementById("editbtn");
  2 | 
  3 | let usernameInput = document.getElementById("username");
  4 | let passwordInput = document.getElementById("password");
  5 | let nicknameInput = document.getElementById("nickname");
  6 | let varss = [usernameInput,passwordInput,nicknameInput]
  7 | 
  8 | 
  9 | varss.forEach((el)=>{
 10 |     el.addEventListener("keydown",(e)=>{
 11 |         if(e.which == 13){
 12 |             daftarEvent();
 13 |         }
 14 |     })
 15 | })
 16 | 
 17 | editbtn.addEventListener("click",()=>{
 18 |     daftarEvent();
 19 | })
 20 | 
 21 | 
 22 | 
 23 | function daftarEvent(){
 24 |     let username = usernameInput.value;
 25 |     username = cekSpasikata(username);
 26 |     let password = passwordInput.value;
 27 |     password = cekSpasikata(password);
 28 |     let password2 = document.getElementById("current_password").textContent;
 29 |     password2 = cekSpasikata(password2);
 30 |     let nick_name = nicknameInput.value;
 31 |     for (let i = 0; i < nick_name.length; i++) {
 32 |         nick_name = nick_name.trim();
 33 |     }
 34 |     
 35 |     if(varss[0].value.length<=0){varss[0].focus()}
 36 |     else if(varss[1].value.length<=0){varss[1].focus()}
 37 |     else if(varss[2].value.length<=0){varss[2].focus()}
 38 | 
 39 | 
 40 |     let lanjut = false;
 41 |     if(username.length<=0){
 42 |         varss[0].focus();
 43 |         varss[0].value = "";
 44 |         notify.textContent = "Data kosong";
 45 |         showNotify();
 46 |     }
 47 |     else if(password.length<=0){
 48 |         varss[1].focus();
 49 |         varss[1].value = "";
 50 |         notify.textContent = "Data kosong";
 51 |         showNotify();
 52 |     }
 53 |     else if(nick_name.length<=0){
 54 |         varss[2].focus();
 55 |         varss[2].value = "";
 56 |         notify.textContent = "Data kosong";
 57 |         showNotify();
 58 |     }
 59 |     
 60 |     else {
 61 |         lanjut = true
 62 |     }
 63 | 
 64 |     if(lanjut == true){
 65 |         $.ajax({
 66 |             url: "edit.php",
 67 |             method : "post",
 68 |             dataType : 'json',
 69 |             data : 
 70 |                 {
 71 |                     username : username,
 72 |                     password : password,
 73 |                     password2 : password2,
 74 |                     nick_name : nick_name,
 75 |                     profile_img : profile_img
 76 |                 },
 77 |             success : (e)=>{
 78 |                 // console.log(e);
 79 |                 // console.log("AJAX OKE");
 80 |                 notify.textContent = e;
 81 |                 showNotify();
 82 |                 if(e=="Berhasil"){
 83 |                     notify.textContent = "Data berhasil diubah";
 84 |                     showNotify();
 85 |                 }
 86 |             },
 87 |             error: (e)=>{
 88 |                 console.log(e);
 89 |             }
 90 |         })
 91 |         .done(()=>{
 92 |             showNotify();
 93 |         })
 94 |     }
 95 | }
 96 | 
 97 | 
 98 | // function showNotify(){
 99 | //     notify = document.getElementById("notify");
100 | //     notify.style.right = '10px';
101 | //     setTimeout(()=>{
102 | //         notify.style.right='-500px';
103 | //     },1000)
104 | // }
105 | 
106 | 
107 | 
108 | let profiles = document.getElementsByName("profile");
109 | let previewprofile = document.getElementById("preview-profile");
110 | let profile_img = previewprofile.alt;
111 | 
112 | profiles.forEach(p => {
113 |     p.addEventListener("click",()=>{
114 |         imgSrc = "../img/pfp/pfp";
115 |         profile_img = p.value;
116 |         imgSrc+=profile_img+".png";
117 |         previewprofile.src = imgSrc;
118 |         imgSrc = "../img/pfp/pfp";
119 |     })
120 | });
121 | 
122 | 
123 | 
124 | 
125 | let hapusbtn = document.getElementById("hapusbtn");
126 | let userid = document.getElementById("user_id");
127 | userid = userid.textContent
128 | hapusbtn.onclick = ()=>{
129 |     lanjut = confirm("Hapus akun?");
130 |     if(lanjut==true){
131 |         $.ajax({
132 |             url:"hapus.php",
133 |             method : "post",
134 |             data : {
135 |                 delete : "true",
136 |                 userid : userid
137 |             },
138 |             dataType: 'json',
139 |             success : (e)=>{
140 |                 console.log(e);
141 |                 if(e=="dihapus"){
142 |                     console.log("ok");
143 |                     window.location = "../";
144 |                 }
145 |                 else if(e=="gagal"){
146 |                     console.log("gagalhapus");
147 |                 }
148 |             },
149 |             error : (e)=>{
150 |                 console.log(e);
151 |                 console.log("gagal");
152 |             }
153 |         })
154 |     }
155 | }
156 | 
157 | 
158 | 
159 | let showpassword = document.getElementById("showpassword");
160 | let show = false;
161 | showpassword.onclick = ()=>{
162 |     if(show==false){
163 |         passwordInput.type = "text";
164 |         showpassword.src = "../img/eye.svg"
165 |         show = true;
166 |     }
167 |     else if(show == true){
168 |         passwordInput.type = "password";
169 |         showpassword.src = "../img/eye-fill.svg"
170 |         show = false;
171 |     }
172 | }


--------------------------------------------------------------------------------
/editprofil/edit.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | require_once "../core/database.php";
 3 | require_once "../core/function.php";
 4 | cekSesi("../login.php");
 5 | 
 6 | $con = new Database();
 7 | 
 8 | if(isset($_POST['password2'])){
 9 |     $username = htmlspecialchars($_POST['username']);
10 |     $password = htmlspecialchars($_POST['password']);
11 |     $password2 = htmlspecialchars($_POST['password2']);
12 |     $nick_name = htmlspecialchars($_POST['nick_name']);
13 |     $profile_img = htmlspecialchars($_POST['profile_img']);
14 |     $query = "
15 |         UPDATE user SET username = '$username', 
16 |         password = '$password', current_password = '$password2', nick_name = '$nick_name',
17 |         profile_image = $profile_img WHERE user_id = {$_SESSION['trainkey_id']}" ;
18 |     $con->query($query);
19 |     $user = $con->execute();
20 |     if($con->rowCount()==1){
21 |         echo json_encode("Berhasil");
22 |     }
23 |     else if($con->rowCount() < 1){
24 |         echo json_encode("Tidak ada data yang diubah");
25 |     }
26 |     else if($con->rowCount() != 1){
27 |         echo json_encode("Gagal");
28 |     }
29 | }
30 | 
31 | ?>


--------------------------------------------------------------------------------
/editprofil/hapus.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../core/database.php";
 4 | require_once "../core/function.php";
 5 | 
 6 | cekSesi("../");
 7 | $con = new Database();
 8 | 
 9 | if(isset($_POST['delete'])){
10 |     $userid = htmlspecialchars($_POST['userid']);
11 |     $query = "DELETE from chat WHERE user_id = $userid;
12 |     DELETE from poin WHERE user_id = $userid;
13 |     DELETE from user WHERE user_id = $userid;";
14 |     $con->query($query);
15 |     $con->execute();
16 |     // echo $con->rowCount();
17 |     if($con->rowCount()==0){
18 | 
19 |         $_SESSION = [];
20 |         session_unset();
21 |         session_destroy();
22 | 
23 |         unset($_SESSION);
24 | 
25 |         // setcookie('username','');
26 |         // setcookie('password','');
27 |         setcookie('username','',time()-3600,'/');
28 |         setcookie('password','',time()-3600,'/');
29 |         echo json_encode("dihapus");
30 |     }
31 |     else{
32 |         echo json_encode("gagal");
33 |     }
34 | }
35 | 
36 | ?>


--------------------------------------------------------------------------------
/editprofil/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | require_once "../core/database.php";
  3 | require_once "../core/function.php";
  4 | cekSesi("../login.php");
  5 | 
  6 | $con = new Database();
  7 | 
  8 | $query = "SELECT * FROM user WHERE user_id = '{$_SESSION['trainkey_id']}';";
  9 | $con->query($query);
 10 | $user = $con->getSingle();
 11 | 
 12 | // var_dump($user);
 13 | ?>
 14 | 
 15 | 
 16 | <!DOCTYPE html>
 17 | <html lang="en">
 18 | <head>
 19 |     <meta charset="UTF-8">
 20 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 21 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 22 |     <title>Edit Profil</title>
 23 |     
 24 |     <link rel="icon" type="image/x-icon" href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/img/logo.png">
 25 |     <link rel="stylesheet" href="../css/style.css">
 26 |     <link rel="stylesheet" href="edit.css">
 27 | </head>
 28 | <body>
 29 |     <p class="notify" id="notify">Notify</p>
 30 | 
 31 |     <!-- Navbar -->
 32 |     <!-- <?=__DIR__ ?> -->
 33 |     <div class="nav">
 34 |         <a href="../" class="brand">
 35 |             <img src="../img/logo.png" alt="" width="70px">
 36 |             <h1>Train Key</h1>
 37 |         </a>
 38 |         <div class="sub-nav">
 39 |             <a class="nav-list">
 40 |                 <p>Help & Support</p>
 41 |             </a>
 42 |             <a class="nav-list">
 43 |                 <p>Documentation</p>
 44 |             </a>
 45 |         </div>
 46 |     </div>
 47 |     <!-- End Navbar -->
 48 | 
 49 |     <div class="login-container">
 50 |         <div class="card-container">
 51 |             <h1>Edit Profil</h1>
 52 |             <form class="form-container">
 53 |                 <fieldset class="form-profile">
 54 |                     <legend>Pilih foto profil : </legend>
 55 |                     <label for="profile1">
 56 |                         <input type="radio" name="profile" id="profile1" value="1">
 57 |                         <img class="profile-img" src="../img/pfp/pfp1.png">
 58 |                     </label>
 59 |                     <label for="profile2">
 60 |                         <input type="radio" name="profile" id="profile2" value="2">
 61 |                         <img class="profile-img" src="../img/pfp/pfp2.png">
 62 |                     </label>
 63 |                     <label for="profile3">
 64 |                         <input type="radio" name="profile" id="profile3" value="3">
 65 |                         <img class="profile-img" src="../img/pfp/pfp3.png">
 66 |                     </label>
 67 |                     <label for="profile4">
 68 |                         <input type="radio" name="profile" id="profile4" value="4">
 69 |                         <img class="profile-img" src="../img/pfp/pfp4.png">
 70 |                     </label>
 71 |                     <label for="profile5">
 72 |                         <input type="radio" name="profile" id="profile5" value="5">
 73 |                         <img class="profile-img" src="../img/pfp/pfp5.png">
 74 |                     </label>
 75 |                     <label for="profile6">
 76 |                         <input type="radio" name="profile" id="profile6" value="6">
 77 |                         <img class="profile-img" src="../img/pfp/pfp6.png">
 78 |                     </label>
 79 |                     <label for="profile7">
 80 |                         <input type="radio" name="profile" id="profile7" value="7">
 81 |                         <img class="profile-img" src="../img/pfp/pfp7.png">
 82 |                     </label>
 83 |                     <label for="profile8">
 84 |                         <input type="radio" name="profile" id="profile8" value="8">
 85 |                         <img class="profile-img" src="../img/pfp/pfp8.png">
 86 |                     </label>
 87 |                     <label for="profile9">
 88 |                         <input type="radio" name="profile" id="profile9" value="9">
 89 |                         <img class="profile-img" src="../img/pfp/pfp9.png">
 90 |                     </label>
 91 |                     <label for="profile10">
 92 |                         <input type="radio" name="profile" id="profile10" value="10">
 93 |                         <img class="profile-img" src="../img/pfp/pfp10.png">
 94 |                     </label>
 95 |                     <label for="profile11">
 96 |                         <input type="radio" name="profile" id="profile11" value="11">
 97 |                         <img class="profile-img" src="../img/pfp/pfp11.png">
 98 |                     </label>
 99 |                     <label for="profile12">
100 |                         <input type="radio" name="profile" id="profile12" value="12">
101 |                         <img class="profile-img" src="../img/pfp/pfp12.png">
102 |                     </label>
103 |                     <label for="profile13">
104 |                         <input type="radio" name="profile" id="profile13" value="13">
105 |                         <img class="profile-img" src="../img/pfp/pfp13.png">
106 |                     </label>
107 |                     <label for="profile14">
108 |                         <input type="radio" name="profile" id="profile14" value="14">
109 |                         <img class="profile-img" src="../img/pfp/pfp14.png">
110 |                     </label>
111 |                     <label for="profile15">
112 |                         <input type="radio" name="profile" id="profile15" value="15">
113 |                         <img class="profile-img" src="../img/pfp/pfp15.png">
114 |                     </label>
115 |                     <label for="profile16">
116 |                         <input type="radio" name="profile" id="profile16" value="16">
117 |                         <img class="profile-img" src="../img/pfp/pfp16.png">
118 |                     </label>
119 |                 </fieldset>
120 |                 <div class="form-content">
121 |                     <img src="../img/pfp/pfp<?=$user['profile_image'] ?>.png" id="preview-profile" width="100px" alt="<?=$user['profile_image'] ?>">
122 |                 </div>
123 |                 <div class="form-content">
124 |                     <label for="username">Username</label>
125 |                     <input value="<?=$user['username'] ?>" type="text" name="username" maxlength="20" id="username" autocomplete="off" required="" autofocus placeholder="Type here...">
126 |                 </div>
127 |                 <div class="form-content password">
128 |                     <label for="password">Password</label>
129 |                     <input value="<?=$user['password'] ?>" type="password" name="password" id="password" autocomplete="off" required="" autofocus placeholder="Type here...">
130 |                     <img style="color: red;" src="../img/eye-fill.svg" id="showpassword">
131 |                 </div>
132 |                 <div class="form-content">
133 |                     <label for="nickname">Nickname</label>
134 |                     <input value="<?=$user['nick_name'] ?>" type="text" name="nickname" maxlength="50" id="nickname" autocomplete="off" required="" autofocus placeholder="Type here...">
135 |                 </div>
136 |             </form>
137 |             <button type="button" id="editbtn">Simpan</button>
138 |             <span id="hapusbtn" style="color:red;">Hapus akun</span>
139 |         </div>
140 |     </div>
141 |     <div id="current_password" style="color: red; display:none;"><?=$user['password'] ?></div>
142 |     <div id="user_id" style="color: red; display:none; "><?=$_SESSION['trainkey_id'] ?></div>
143 | 
144 |     <script src="../js/jquery.min.js"></script>
145 |     <script src="../js/function.js"></script>
146 |     <script src="edit.js"></script>
147 | </body>
148 | </html>


--------------------------------------------------------------------------------
/forgot_password.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // rand();
4 | // substr();
5 | $kirimEmail = mail("ujicobaaja11@gmail.com","New Password","Pesan","From: wwwnuriscs76@gmail.com");
6 | ini_set($kirimEmail,$kirimEmail);
7 | 
8 | ?>


--------------------------------------------------------------------------------
/forgot_password/ajax/password.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../../core/function.php";
 4 | require_once "../../core/database.php";
 5 | sesiLogin();
 6 | 
 7 | $con = new Database();
 8 | 
 9 | if(isset($_POST['cekpassword'])){
10 |     $username = htmlspecialchars($_POST['username']);
11 |     $password = htmlspecialchars($_POST['password']);
12 |     $query = "SELECT * FROM user WHERE username = '$username' AND current_password = '$password'";
13 |     $con->query($query);
14 |     $res = $con->getSingle();
15 |     if($con->rowCount()==1){
16 |         echo json_encode("lanjut");
17 |         $_SESSION['reset_password'] = "true";
18 |         $_SESSION['user_id'] = $res['user_id'];
19 |     }
20 |     else if($con->rowCount()<=0){
21 |         echo json_encode("Current password salah");
22 |     }
23 |     else if($con->rowCount()!=1){
24 |         echo json_encode("Current password salah");
25 |     }
26 | }
27 | 
28 | 
29 | ?>


--------------------------------------------------------------------------------
/forgot_password/ajax/reset.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | session_start();
 4 | require_once "../../core/database.php";
 5 | 
 6 | $con = new Database();
 7 | 
 8 | if(isset($_POST['reset_password'])){
 9 |     $user_id = $_SESSION['user_id'];
10 |     $passwordBaru = htmlspecialchars($_POST['password']);
11 | 
12 |     $query = "SELECT * FROM user WHERE user_id = $user_id";
13 |     $con->query($query);
14 |     $res = $con->getSingle();
15 | 
16 |     $passwordLama = $res['password'];
17 |     // echo json_encode($passwordLama);
18 |     
19 |     $query = "UPDATE user SET password = '$passwordBaru', current_password = '$passwordLama' WHERE user_id = $user_id";
20 |     $con->query($query);
21 |     $con->execute();
22 | 
23 |     if($con->rowCount() == 1){
24 |         $_SESSION = [];
25 |         session_unset();
26 |         session_destroy();
27 | 
28 |         echo json_encode("berhasil");
29 |     }
30 |     else if($con->rowCount() == 0){
31 |         echo json_encode("Password tidak berubah");
32 |     }
33 |     else{
34 |         echo json_encode("gagal");
35 |     }
36 | }
37 | 
38 | ?>


--------------------------------------------------------------------------------
/forgot_password/ajax/user.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../../core/function.php";
 4 | require_once "../../core/database.php";
 5 | sesiLogin();
 6 | 
 7 | $con = new Database();
 8 | 
 9 | if(isset($_POST['cekusername'])){
10 |     $username = htmlspecialchars($_POST['username']);
11 |     $query = "SELECT * FROM user WHERE username = '$username'";
12 |     $con->query($query);
13 |     $con->execute();
14 |     if($con->rowCount()==0){
15 |         echo json_encode("Data tidak ditemukan");
16 |     }
17 |     else if($con->rowCount()==1){
18 |         echo json_encode("Data ditemukan");
19 |     }
20 |     else{
21 |         echo json_encode("Gagal mencari username");
22 |     }
23 | }
24 | 
25 | else if(!isset($_POST['cekusername'])){
26 |     header("Location: ../");
27 | }
28 | 
29 | ?>


--------------------------------------------------------------------------------
/forgot_password/forgot.css:
--------------------------------------------------------------------------------
  1 | 
  2 | *{
  3 |     font-family: 'Poppins', sans-serif;
  4 |     box-sizing: border-box !important;
  5 |     color: #6C4AB6;
  6 | }
  7 | body{
  8 |     margin: 0;
  9 |     padding: 0;
 10 |     background-color: #6C4AB6;
 11 | }
 12 | a{
 13 |     text-decoration: none;
 14 |     color: inherit;
 15 | }
 16 | 
 17 | 
 18 | 
 19 | 
 20 | /* Navbar */
 21 | .brand{
 22 |     width: 100%;
 23 |     /* background-color: red; */
 24 |     padding: 1px;
 25 |     padding-left: 20px;
 26 |     display: flex;
 27 |     align-items: center;
 28 |     justify-content: start;
 29 | }
 30 | .brand h1, .nav-list p{
 31 |     color: #eee;
 32 | }
 33 | /* End Navbar */
 34 | 
 35 | 
 36 | 
 37 | /* Form login */
 38 | .login-container{
 39 |     width: 100%;
 40 |     height: 100vh;
 41 |     display: flex;
 42 |     align-items: center;
 43 |     justify-content: center;
 44 | }
 45 | .card-container{
 46 |     width: 40%;
 47 |     background-color: #fff;
 48 |     display: flex;
 49 |     flex-direction: column;
 50 |     align-items: center;
 51 |     justify-content: center;
 52 |     border-radius: 10px;
 53 |     padding: 20px;
 54 |     padding-top: 0;
 55 | }
 56 | 
 57 | 
 58 | .form-container{
 59 |     width: 100%;
 60 |     height: 80%;
 61 |     display: flex;
 62 |     flex-direction: column;
 63 |     align-items: center;
 64 |     justify-content: center;
 65 | }
 66 | .form-content{
 67 |     width: 80%;
 68 |     display: flex;
 69 |     flex-direction: column;
 70 |     align-items: center;
 71 |     justify-content: center;
 72 |     /* padding: 10px 0; */
 73 | }
 74 | label{
 75 |     padding: 20px;
 76 | }
 77 | input{
 78 |     height: 44px;
 79 |     width: 100%;
 80 |     border-radius: 10px;
 81 |     border: none;
 82 |     border-bottom: 1px solid #6C4AB6;
 83 |     border: 1px solid #6C4AB6;
 84 |     padding: 10px 15px;
 85 |     outline: none;
 86 |     box-sizing: border-box;
 87 |     transition: 0.3s;
 88 | }
 89 | input::placeholder{
 90 |     color: #aaa;
 91 | }
 92 | input:focus{
 93 |     box-shadow: 0 0 3px #6C4AB6;
 94 | }
 95 | #form-password{
 96 |     display: none;
 97 | }
 98 | 
 99 | button{
100 |     width: 100px;
101 |     height: 44px;
102 |     margin: 10px 0;
103 |     background-color: #6C4AB6;
104 |     color: #eee;
105 |     border: none;
106 |     border-radius: 20px;
107 |     cursor: pointer;
108 |     display: none;
109 |     align-items: center;
110 |     justify-content: center;
111 | }
112 | 


--------------------------------------------------------------------------------
/forgot_password/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once "../core/function.php";
 4 | // cekSesi("../");
 5 | sesiLogin();
 6 | 
 7 | // var_dump($_COOKIE);
 8 | ?>
 9 | 
10 | <!DOCTYPE html>
11 | <html lang="en">
12 | <head>
13 |     <meta charset="UTF-8">
14 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
15 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |     <title>Forgot Password</title>
17 |     <link rel="icon" type="image/x-icon" href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/img/logo.png">
18 |     <link rel="stylesheet" href="../css/style.css">
19 |     <link rel="stylesheet" href="forgot.css">
20 | </head>
21 | <body>
22 |     <!-- Navbar -->
23 |     <div class="nav">
24 |         <a href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/" class="brand">
25 |             <img src="../img/logo.png" alt="" width="70px">
26 |             <h1>Train Key</h1>
27 |         </a>
28 |     </div>
29 |     <!-- End Navbar -->
30 | 
31 |     <p class="notify" id="notify">NOTIFY</p>
32 |     <div class="login-container">
33 |         <div class="card-container">
34 |             <!-- <h1>Login</h1> -->
35 |             <form class="form-container">
36 |                 <div class="form-content" id="form-username">
37 |                     <label for="username">Masukkan username kamu :</label>
38 |                     <input type="text" name="username" style="text-align: center;" id="username" autocomplete="off" required="" autofocus placeholder="username">
39 |                 </div>
40 |                 <div class="form-content" id="form-password">
41 |                     <label style="font-size: 12px; text-align :center;" for="password">Masukkan password yang kamu pakai sebelumnya :</label>
42 |                     <input type="text" name="password" style="text-align: center;" id="password" autocomplete="off" required="" autofocus placeholder="password">
43 |                 </div>
44 |             </form>
45 |             <button name="send" type="button" id="sendbtn">Send</button>
46 |         </div>
47 |     </div>
48 | 
49 |     <script src="../js/jquery.min.js"></script>
50 |     <script src="../js/function.js"></script>
51 |     <script src="js/user.js"></script>
52 | </body>
53 | </html>
54 | 
55 | 


--------------------------------------------------------------------------------
/forgot_password/js/reset.js:
--------------------------------------------------------------------------------
 1 | let passwordInput = document.getElementById("password");
 2 | let password2Input = document.getElementById("password2");
 3 | let simpanbtn = document.getElementById("simpanbtn");
 4 | 
 5 | 
 6 | passwordInput.addEventListener("keydown",(e)=>{
 7 |     if(e.which == 13){
 8 |         gantiPassword();
 9 |     }
10 | })
11 | 
12 | password2Input.addEventListener("keydown",(e)=>{
13 |     if(e.which == 13){
14 |         gantiPassword();
15 |     }
16 | })
17 | 
18 | simpanbtn.addEventListener("click",()=>{
19 |     gantiPassword();
20 | })
21 | 
22 | function gantiPassword(){
23 |     password = passwordInput.value;
24 |     password = cekSpasikata(password);
25 |     console.log(password);
26 |     password2 = password2Input.value;
27 |     password2 = cekSpasikata(password2)
28 |     console.log(password2);
29 |     
30 |     let lanjut = "false";
31 | 
32 |     if(password.length<=0){
33 |         passwordInput.focus();
34 |         notify.textContent = "Password kosong";
35 |         lanjut = "false";
36 |         showNotify();
37 |     }
38 |     else if(password2.length<=0){
39 |         password2Input.focus();
40 |         notify.textContent = "Password kosong";
41 |         lanjut = "false";
42 |         showNotify();
43 |     }
44 |     else if(password.length<5){
45 |         passwordInput.focus();
46 |         notify.textContent = "Password kurang dari 5";
47 |         lanjut = "false";
48 |         showNotify();
49 |     }
50 |     else if(password2.length<5){
51 |         password2Input.focus();
52 |         notify.textContent = "Password kurang dari 5";
53 |         lanjut = "false";
54 |         showNotify();
55 |     }
56 |     else if(password != password2){
57 |         console.log("NO");
58 |         notify.textContent = "Password tidak sama";
59 |         showNotify();
60 |         lanjut = "false";
61 |     }
62 |     else if(password == password2 && password.length > 4 && password2.length > 4){
63 |         lanjut = "true";
64 |     }
65 |     
66 |     if(lanjut === "true"){
67 |         $.ajax({
68 |             url : "ajax/reset.php",
69 |             method : "post",
70 |             data : {
71 |                 reset_password : "true",
72 |                 password : password2Input.value
73 |             },
74 |             dataType : "json",
75 |             success : (e)=>{
76 |                 if(e=="berhasil"){
77 |                     alert("Password berhasil diubah");
78 |                     window.location = "../";
79 |                 }
80 |                 else{
81 |                     notify.textContent = e;
82 |                     showNotify();
83 |                     passwordInput.focus();
84 |                 }
85 |             },
86 |             error:(e)=>{
87 |                 console.log(e);
88 |             }
89 |         })
90 |     }
91 | }


--------------------------------------------------------------------------------
/forgot_password/js/user.js:
--------------------------------------------------------------------------------
 1 | let sendbtn = document.getElementById("sendbtn");
 2 | let usernameInput = document.getElementById("username");
 3 | let passwordInput = document.getElementById("password");
 4 | let formusername = document.getElementById("form-username");
 5 | let formpassword = document.getElementById("form-password");
 6 | 
 7 | sendbtn.addEventListener("click",()=>{
 8 |     ajaxPassword();
 9 | })
10 | 
11 | passwordInput.addEventListener("keydown",(e)=>{
12 |     if(e.which == 13){
13 |         ajaxPassword();
14 |     }
15 | })
16 | 
17 | 
18 | function ajaxPassword(){
19 |     let username = usernameInput.value;
20 |     let password = passwordInput.value;
21 |     username = cekSpasikata(username);
22 |     password = cekSpasikata(password);
23 |     if(username.length > 0 && password.length >0){
24 |         $.ajax({
25 |             url : "ajax/password.php",
26 |             method : "post",
27 |             data : {
28 |                 cekpassword : "oke",
29 |                 username : username,
30 |                 password : password
31 |             },
32 |             dataType : "json",
33 |             success : (e)=>{
34 |                 notify.textContent = e;
35 |                 if(e=="lanjut"){
36 |                     window.location = "reset_password.php";
37 |                 }
38 |                 showNotify();
39 |                 passwordInput.value = "";
40 |             }
41 |         })
42 |     }
43 | }
44 | 
45 | 
46 | usernameInput.addEventListener("keydown",(e)=>{
47 |     let username = usernameInput.value;
48 |     username = cekSpasikata(username);
49 |     if(e.which == 13){
50 |         ajaxUser();
51 |     }
52 | })
53 | 
54 | 
55 | 
56 | function ajaxUser(){
57 |     let username = usernameInput.value;
58 |     $.ajax({
59 |         url : "ajax/user.php",
60 |         method : 'post',
61 |         data : {
62 |             cekusername : 'true',
63 |             username : username
64 |         },
65 |         dataType : "json",
66 |         success : (e)=>{
67 |             console.log("AJAX OKE");
68 |             notify.textContent = e;
69 |             if(e=="Data ditemukan"){
70 |                 sendbtn.style.display = "flex";
71 |                 formpassword.style.display = "flex";
72 |                 formusername.style.display = "none";
73 |                 passwordInput.focus();
74 |             }
75 |             else if (e=="Data tidak ditemukan")
76 |             {
77 |                 // showNotify();
78 |                 showNotify();
79 |             }
80 |         },
81 |         error:(e)=>{
82 |             console.log(e);
83 |         }
84 |     })
85 | }
86 | 
87 | 
88 | 
89 | 
90 | 
91 | function showNotify(){
92 |     notify = document.getElementById("notify");
93 |     notify.style.right = '10px';
94 |     setTimeout(()=>{
95 |         notify.style.right='-500px';
96 |     },1000)
97 | }
98 | 


--------------------------------------------------------------------------------
/forgot_password/reset.css:
--------------------------------------------------------------------------------
  1 | 
  2 | *{
  3 |     font-family: 'Poppins', sans-serif;
  4 |     box-sizing: border-box !important;
  5 |     color: #6C4AB6;
  6 | }
  7 | body{
  8 |     margin: 0;
  9 |     padding: 0;
 10 |     background-color: #6C4AB6;
 11 | }
 12 | a{
 13 |     text-decoration: none;
 14 |     color: inherit;
 15 | }
 16 | 
 17 | 
 18 | 
 19 | 
 20 | /* Navbar */
 21 | .brand{
 22 |     width: 100%;
 23 |     /* background-color: red; */
 24 |     padding: 1px;
 25 |     padding-left: 20px;
 26 |     display: flex;
 27 |     align-items: center;
 28 |     justify-content: start;
 29 | }
 30 | .brand h1, .nav-list p{
 31 |     color: #eee;
 32 | }
 33 | /* End Navbar */
 34 | 
 35 | 
 36 | 
 37 | /* Form login */
 38 | .login-container{
 39 |     width: 100%;
 40 |     height: 100vh;
 41 |     display: flex;
 42 |     align-items: center;
 43 |     justify-content: center;
 44 | }
 45 | .card-container{
 46 |     width: 40%;
 47 |     background-color: #fff;
 48 |     display: flex;
 49 |     flex-direction: column;
 50 |     align-items: center;
 51 |     justify-content: center;
 52 |     border-radius: 10px;
 53 |     padding: 20px;
 54 |     padding-top: 0;
 55 | }
 56 | 
 57 | 
 58 | .form-container{
 59 |     width: 100%;
 60 |     height: 80%;
 61 |     display: flex;
 62 |     flex-direction: column;
 63 |     align-items: center;
 64 |     justify-content: center;
 65 | }
 66 | .form-content{
 67 |     width: 80%;
 68 |     display: flex;
 69 |     flex-direction: column;
 70 |     align-items: flex-start;
 71 |     justify-content: center;
 72 | }
 73 | label{
 74 |     padding: 10px;
 75 | }
 76 | input{
 77 |     height: 44px;
 78 |     width: 100%;
 79 |     border-radius: 10px;
 80 |     border: none;
 81 |     border-bottom: 1px solid #6C4AB6;
 82 |     border: 1px solid #6C4AB6;
 83 |     padding: 10px 15px;
 84 |     outline: none;
 85 |     box-sizing: border-box;
 86 |     transition: 0.3s;
 87 | }
 88 | input::placeholder{
 89 |     color: #aaa;
 90 | }
 91 | input:focus{
 92 |     box-shadow: 0 0 3px #6C4AB6;
 93 | }
 94 | #form-password{
 95 |     display: none;
 96 | }
 97 | 
 98 | button{
 99 |     width: 100px;
100 |     height: 44px;
101 |     margin: 10px 0;
102 |     background-color: #6C4AB6;
103 |     color: #eee;
104 |     border: none;
105 |     border-radius: 20px;
106 |     cursor: pointer;
107 |     display: flex;
108 |     align-items: center;
109 |     justify-content: center;
110 | }
111 | 


--------------------------------------------------------------------------------
/forgot_password/reset_password.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | session_start();
 4 | 
 5 | if(!isset($_SESSION['reset_password'])){
 6 |     header("Location: ../");
 7 | }
 8 | else if(isset($_SESSION['reset_password'])){
 9 | 
10 | }
11 | 
12 | ?>
13 | 
14 | 
15 | <!DOCTYPE html>
16 | <html lang="en">
17 | <head>
18 |     <meta charset="UTF-8">
19 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
20 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
21 |     <title>Edit Profil</title>
22 |     
23 |     <link rel="icon" type="image/x-icon" href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/img/logo.png">
24 |     <link rel="stylesheet" href="../css/style.css">
25 |     <link rel="stylesheet" href="reset.css">
26 | </head>
27 | <body>
28 |     <p class="notify" id="notify">Notify</p>
29 | 
30 |     <!-- Navbar -->
31 |     <div class="nav">
32 |         <a href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/" class="brand">
33 |             <img src="../img/logo.png" alt="" width="70px">
34 |             <h1>Train Key</h1>
35 |         </a>
36 |     </div>
37 |     <!-- End Navbar -->
38 | 
39 |     <div class="login-container">
40 |         <div class="card-container">
41 |             <h1>New Password</h1>
42 |             <form class="form-container">
43 |                 <div class="form-content">
44 |                     <label for="password">New password</label>
45 |                     <input type="text" name="password" id="password" autocomplete="off" required="" minlength="8" autofocus placeholder="Type here...">
46 |                 </div>
47 |                 <div class="form-content">
48 |                     <label for="password2">Retype password</label>
49 |                     <input type="text" name="password2" id="password2" autocomplete="off" required="" autofocus placeholder="Type here...">
50 |                     <span style="color:red; font-size: 12px;">* Setiap spasi akan dihapus</span>
51 |                 </div>
52 |             </form>
53 |             <button type="button" id="simpanbtn">Simpan</button>
54 |         </div>
55 |     </div>
56 | 
57 |     <script src="../js/jquery.min.js"></script>
58 |     <script src="../js/function.js"></script>
59 |     <script src="js/reset.js"></script>
60 | </body>


--------------------------------------------------------------------------------
/forum/ajax/chat.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | require_once "../../core/database.php";
 3 | session_start();
 4 | 
 5 | $con = new Database();
 6 | 
 7 | $query = "SELECT c.text_chat as text_chat, c.tanggal as tanggal, u.user_id, u.nick_name, u.username, u.profile_image AS profile_image FROM chat as c join user as u using(user_id) ORDER BY tanggal DESC LIMIT 20";
 8 | $con->query($query);
 9 | 
10 | $result = $con->getAssoc();
11 | $rowcount = $con->rowCount();
12 | 
13 | // var_dump($result);
14 | if(isset($_POST['limit'])){
15 |     $query = "SELECT c.text_chat as text_chat, c.tanggal as tanggal, u.user_id, u.nick_name, u.username, u.profile_image as profile_image FROM chat as c join user as u using(user_id) ORDER BY tanggal DESC LIMIT {$_POST['limit']}";
16 |     $con->query($query);
17 |     
18 |     $result = $con->getAssoc();
19 |     $rowcount = $con->rowCount();
20 | }
21 | 
22 | 
23 | ?>
24 | <?php foreach($result as $res){ ?>
25 |     <?php if($res['user_id'] == $_SESSION['trainkey_id']) {?>
26 |         <div class="komen-container my-comment">
27 |             <div id="chat-container" class="chat-container my-comment">
28 |                 <div class="header-komen">
29 |                     <p class="username"><?=$res['nick_name'] ?>
30 |                     <p class="tanggal"><?=$res['tanggal'] ?></p>
31 |                 </div>
32 |                 <p class="text-chat"><?=$res['text_chat'] ?></p>
33 |             </div>
34 |             <div class="profile-container">
35 |                 <img src="../img/pfp/pfp<?=$res['profile_image'] ?>.png" class="profile_img" id="profile" alt="">
36 |                 <p class="rowcount" id="rowcount" style="display: none;"><?=$rowcount ?></p>
37 |             </div>
38 |         </div>
39 |     <?php } ?>
40 |     <?php if($res['user_id'] != $_SESSION['trainkey_id']) {?>
41 |         <div class="komen-container">
42 |             <div class="profile-container">
43 |                 <img src="../img/pfp/pfp<?=$res['profile_image'] ?>.png" class="profile_img" id="profile" alt="">
44 |                 <p class="rowcount" id="rowcount" style="display: none;"><?=$rowcount ?></p>
45 |             </div>
46 |             <div id="chat-container" class="chat-container">
47 |                 <div class="header-komen">
48 |                     <p class="username"><?=$res['nick_name'] ?>
49 |                     <p class="tanggal"><?=$res['tanggal'] ?></p>
50 |                 </div>
51 |                 <p class="text-chat"><?=$res['text_chat'] ?></p>
52 |             </div>
53 |         </div>
54 |     <?php } ?>
55 | <?php } ?>
56 | 
57 | 


--------------------------------------------------------------------------------
/forum/ajax/insertkomen.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | session_start();
 4 | require_once "../../core/database.php";
 5 | 
 6 | $con = new Database();
 7 | 
 8 | $query = "SELECT * FROM chat ORDER BY tanggal DESC LIMIT 20";
 9 | $con->query($query);
10 | $result = $con->getAssoc();
11 | 
12 | if (isset($_POST['komen'])){
13 |     $tekskomen = htmlspecialchars($_POST['tekskomen']);
14 |     
15 |     $query = "INSERT INTO chat(user_id,text_chat,tanggal) VALUES ({$_SESSION['trainkey_id']},'$tekskomen',NOW())";
16 |     $con->query($query);
17 |     $con->execute();
18 | 
19 |     $query = "SELECT c.text_chat as text_chat, c.tanggal as tanggal, u.user_id, u.nick_name, u.username, u.profile_image as profile_image FROM chat as c join user as u using(user_id) ORDER BY tanggal DESC LIMIT {$_POST['limit']}";
20 |     $con->query($query);
21 |     $result = $con->getAssoc();
22 | }
23 | 
24 | ?>
25 | 
26 | <?php foreach($result as $res){ ?>
27 |     <?php if($res['user_id'] == $_SESSION['trainkey_id']) {?>
28 |         <div class="komen-container my-comment">
29 |             <div id="chat-container" class="chat-container my-comment">
30 |                 <div class="header-komen">
31 |                     <p class="username"><?=$res['nick_name'] ?>
32 |                     <p class="tanggal"><?=$res['tanggal'] ?></p>
33 |                 </div>
34 |                 <p class="text-chat"><?=$res['text_chat'] ?></p>
35 |             </div>
36 |             <div class="profile-container">
37 |                 <img src="../img/pfp/pfp<?=$res['profile_image'] ?>.png" class="profile_img" id="profile" alt="">
38 |                 <p class="rowcount" id="rowcount" style="display: none;"><?=$rowcount ?></p>
39 |             </div>
40 |         </div>
41 |     <?php } ?>
42 |     <?php if($res['user_id'] != $_SESSION['trainkey_id']) {?>
43 |         <div class="komen-container">
44 |             <div class="profile-container">
45 |                 <img src="../img/pfp/pfp<?=$res['profile_image'] ?>.png" class="profile_img" id="profile" alt="">
46 |                 <p class="rowcount" id="rowcount" style="display: none;"><?=$rowcount ?></p>
47 |             </div>
48 |             <div id="chat-container" class="chat-container">
49 |                 <div class="header-komen">
50 |                     <p class="username"><?=$res['nick_name'] ?>
51 |                     <p class="tanggal"><?=$res['tanggal'] ?></p>
52 |                 </div>
53 |                 <p class="text-chat"><?=$res['text_chat'] ?></p>
54 |             </div>
55 |         </div>
56 |     <?php } ?>
57 | <?php } ?>


--------------------------------------------------------------------------------
/forum/ajax/loadmore.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | session_start();
 4 | require_once "../../core/database.php";
 5 | 
 6 | 
 7 | $con = new Database();
 8 | $query = "SELECT * FROM chat ORDER BY tanggal DESC LIMIT 20";
 9 | $con->query($query);
10 | 
11 | $result = $con->getAssoc();
12 | 
13 | 
14 | if(isset($_POST['loadmore'])){
15 |     $query = "SELECT * FROM chat WHERE tanggal < '{$_POST['last_tanggal']}' ORDER BY tanggal DESC LIMIT 20";
16 |     $con->query($query);
17 | 
18 |     $result = $con->getAssoc();
19 | }
20 | ?>
21 | 
22 | 
23 | <?php foreach($result as $k => $res){ ?>
24 |     <div class="komen-container">
25 |         <div class="profile">
26 |             <p>x</p>
27 |         </div>
28 |         <div id="chat-container" class="chat-container">
29 |             <div class="header-komen">
30 |                 <p class="username"><?=$res['user_id'] ?><span>&nbsp;</span>Anonymous</p>
31 |                 <p class="tanggal"><?=$res['tanggal'] ?></p>
32 |             </div>
33 |             <p class="text-chat"><?=$res['text_chat'] ?></p>
34 |         </div>
35 |     </div>
36 | <?php } ?>


--------------------------------------------------------------------------------
/forum/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class Database{
 4 |     private $con,$stmt;
 5 |     public function __construct()
 6 |     {
 7 |         try{
 8 |             $this->con = new PDO("mysql:host=localhost;dbname=uas212410102033;",'tia212410102033','innnn',[PDO::ATTR_PERSISTENT=>true,PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION]);
 9 |         }catch(PDOException $e){
10 |             die($e->getMessage());
11 |             exit();
12 |         }
13 |     }
14 |     
15 |     public function query(string $query)
16 |     {
17 |         $this->stmt = $this->con->prepare($query);
18 |     }
19 |     
20 |     public function bind($param, $value, $type=null )
21 |     {
22 |         if (is_null($type))
23 |         {
24 |             switch(true){
25 |                 case is_int($value) :
26 |                     $type = PDO::PARAM_INT;
27 |                     break;
28 |                 case is_bool($value):
29 |                     $type = PDO::PARAM_BOOL;
30 |                     break;
31 |                 case is_null($value):
32 |                     $type = PDO::PARAM_NULL;
33 |                     break;
34 |                 default :
35 |                     $type = PDO::PARAM_STR;
36 |             }
37 |         }
38 |         $this->stmt->bindValue($param, $value, $type);
39 |     }
40 | 
41 |     public function execute()
42 |     {
43 |         $this->stmt->execute();
44 |     }
45 | 
46 |     public function getAssoc()
47 |     {
48 |         $this->stmt->execute();
49 |         return $this->stmt->fetchAll(PDO::FETCH_ASSOC);
50 |     }
51 | 
52 |     public function getSingle()
53 |     {
54 |         $this->stmt->execute();
55 |         return $this->stmt->fetch(PDO::FETCH_ASSOC);
56 |     }
57 | 
58 |     public function rowCount(){
59 |         return $this->stmt->rowCount();
60 |     }
61 | }
62 | 
63 | ?>
64 | 


--------------------------------------------------------------------------------
/forum/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | require_once "../core/function.php";
  3 | cekSesi("../login.php");
  4 | 
  5 | require_once "../core/database.php";
  6 | 
  7 | $con = new Database();
  8 | $query = "SELECT c.text_chat as text_chat, c.tanggal as tanggal, u.user_id, u.nick_name, u.username, u.profile_image FROM chat as c join user as u using(user_id) ORDER BY tanggal DESC LIMIT 20";
  9 | $con->query($query);
 10 | 
 11 | $result = $con->getAssoc();
 12 | ?>
 13 | 
 14 | <!DOCTYPE html>
 15 | <html lang="en">
 16 | <head>
 17 |     <meta charset="UTF-8">
 18 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 19 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 20 |     <title>Forum - TrainKey</title>
 21 |     <link rel="icon" type="image/x-icon" href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/img/logo.png">
 22 |     <style>
 23 |         @import url('https://fonts.googleapis.com/css2?family=Poppins');
 24 |     </style>
 25 |     <link rel="stylesheet" href="../css/style.css">
 26 |     <link rel="stylesheet" href="style.css">
 27 |     <link rel="stylesheet" href="train-style.css">
 28 | </head>
 29 | <body>
 30 |     <div class="train-container" id="train-container">
 31 |         <div class="container">
 32 |             <div class="content">
 33 |                 <div class="track"></div>
 34 |                 <div class="train">
 35 |                 <div class="front"></div>
 36 |                 <div class="wheels">
 37 |                     <div class="smallOne"></div>
 38 |                     <div class="smallTwo"></div>
 39 |                     <div class="smallThree"></div>
 40 |                     <div class="smallFour"></div>
 41 |                     <div class="smallFive"></div>
 42 |                     <div class="smallSix"></div>
 43 |                     <div class="big"></div>
 44 |                 </div>
 45 |                 <div class="cord"></div>
 46 |                 <div class="coach"></div>
 47 |                 <div class="coachTwo"></div>
 48 |                 <div class="windows"></div>
 49 |                 
 50 |                 <div id="up" class="steam"></div>
 51 |                 <div id="up" class="steam2"></div>
 52 |                 <div id="up" class="steam3"></div>
 53 |                 </div>
 54 |             </div>
 55 |         </div>
 56 |     </div>
 57 |     
 58 |     <p class="notify" id="notify">Notify</p>
 59 |     <div class="nav">
 60 |         <a href="../">
 61 |             <img src="../img/logo.png" alt="" width="70px">
 62 |         </a>
 63 |         <h1 style="text-align: center;">Community</h1>
 64 | 
 65 |     </div>
 66 |     <div class="container">
 67 |         <div class="forum-container">
 68 |             <h1 class="judul">Selamat datang di Forum Trainkey</h1>
 69 |             <p class="subjudul">Harap saling menghormati dan menghargai</p>
 70 |             <div class="chat-area">
 71 |             <?php foreach($result as $res){ ?>
 72 |                 <?php if($res['user_id'] == $_SESSION['trainkey_id']) {?>
 73 |                     <div class="komen-container my-comment">
 74 |                         <div id="chat-container" class="chat-container my-comment">
 75 |                             <div class="header-komen">
 76 |                                 <p class="username"><?=$res['nick_name'] ?>
 77 |                                 <p class="tanggal"><?=$res['tanggal'] ?></p>
 78 |                             </div>
 79 |                             <p class="text-chat"><?=$res['text_chat'] ?></p>
 80 |                         </div>
 81 |                         <div class="profile-container">
 82 |                             <img src="../img/pfp/pfp<?=$res['profile_image'] ?>.png" class="profile_img" id="profile" alt="">
 83 |                             <p class="rowcount" id="rowcount" style="display: none;"><?=$rowcount ?></p>
 84 |                         </div>
 85 |                     </div>
 86 |                 <?php } ?>
 87 |                 <?php if($res['user_id'] != $_SESSION['trainkey_id']) {?>
 88 |                     <div class="komen-container">
 89 |                         <div class="profile-container">
 90 |                             <img src="../img/pfp/pfp<?=$res['profile_image'] ?>.png" class="profile_img" id="profile" alt="">
 91 |                             <p class="rowcount" id="rowcount" style="display: none;"><?=$rowcount ?></p>
 92 |                         </div>
 93 |                         <div id="chat-container" class="chat-container">
 94 |                             <div class="header-komen">
 95 |                                 <p class="username"><?=$res['nick_name'] ?>
 96 |                                 <p class="tanggal"><?=$res['tanggal'] ?></p>
 97 |                             </div>
 98 |                             <p class="text-chat"><?=$res['text_chat'] ?></p>
 99 |                         </div>
100 |                     </div>
101 |                 <?php } ?>
102 |             <?php } ?>
103 |             </div>
104 |             <div class="last-comment" id="last-comment">
105 |                 <p style="color: #eee; font-size:20px;">INI KOMENTAR TERAKHIR</p>
106 |             </div>
107 | 
108 |             <div id="komen">
109 |                 <input type="text" name="tekskomen" id="tekskomen" maxlength="50" placeholder="Dimohon untuk tidak membawa unsur SARA">
110 |                 <button type="button" name="komen" id="kirimkomen">Kirim</button>
111 |             </div>
112 |         </div>
113 |     </div>
114 | 
115 | 
116 |     <div class="loading-container" id="loading-container">
117 |         <div class="loading-outer" id="loading">
118 |             <div class="loading-inner"></div>
119 |         </div>
120 |     </div>
121 | 
122 | 
123 |     <script src="js/jquery.min.js"></script>
124 |     <script src="js/function.js"></script>
125 |     <script src="js/script.js"></script>
126 | </div>
127 | </body>
128 | </html>


--------------------------------------------------------------------------------
/forum/js/function.js:
--------------------------------------------------------------------------------
 1 | function showLoading(){
 2 |     document.getElementById("loading-container").style.opacity = 1;
 3 |     // setTimeout(function(){
 4 |     //     document.getElementById("loading-container").style.opacity = 0;
 5 |     // },700)
 6 | }
 7 | function hideLoading(){
 8 |     document.getElementById("loading-container").style.opacity = 0;
 9 | }
10 | 
11 | 
12 | 
13 | // let r,g=0,b=0;
14 | 
15 | const chattext = document.querySelectorAll(".chat-text");
16 | chattext.forEach(function(cc){
17 |     r = Math.floor(Math.random()*255);
18 |     g = Math.floor(Math.random()*255);
19 |     b = Math.floor(Math.random()*255);
20 |     
21 |     if(r<120){r+=120;}
22 |     if(g<120){g+=120;}
23 |     if(b<120){b+=120;}
24 |     console.log(r,g,b);
25 | 
26 |     cc.style.backgroundColor = "rgb("+r+","+g+","+b+")"
27 | })
28 | 
29 | 
30 | 
31 | function showNotify(){
32 |     notify = document.getElementById("notify");
33 |     notify.style.right = 0;
34 |     setTimeout(()=>{
35 |         notify.style.right='-500px';
36 |     },1000)
37 | }
38 | 
39 | 
40 | function ajaxKomen(){
41 |     let limit = document.querySelectorAll('.komen-container').length;
42 |     if($(window).scrollTop()+$(window).height() >= ($(document).height())){
43 |         limit+=20;
44 |     }
45 |     let tekskomen = document.getElementById('tekskomen').value;
46 |     for (let i = 0; i < tekskomen.length; i++) {
47 |         tekskomen = tekskomen.trim();
48 |     }
49 |     
50 |     if(tekskomen.length<=0){
51 |         komen = document.getElementById("tekskomen");
52 |         komen.value = "";
53 |         notify = document.getElementById("notify");
54 |         notify.textContent = "Komen kosong";
55 |         showNotify();
56 |     }
57 | 
58 |     if(tekskomen.length>0){
59 |         $.ajax({
60 |             url:"ajax/insertkomen.php",
61 |             method:'post',
62 |             data:{
63 |                 komen : 'true',
64 |                 tekskomen: tekskomen,
65 |                 limit : limit
66 |             },
67 |             success : function(data){
68 |                 chatarea.innerHTML = data
69 |             },
70 |             error: function(data){
71 |                 console.log(data);
72 |             }
73 |         })
74 |     }
75 | }


--------------------------------------------------------------------------------
/forum/js/script.js:
--------------------------------------------------------------------------------
 1 | let chatarea = document.querySelector(".chat-area");
 2 | let tekskomen = document.getElementById('tekskomen');
 3 | let kirimkomen = document.getElementById('kirimkomen');
 4 | 
 5 | 
 6 | 
 7 | tekskomen.addEventListener('keydown',function(e){
 8 |     if(e.which==13){
 9 |         ajaxKomen();
10 |         tekskomen.value="";
11 |     }
12 | })
13 | 
14 | 
15 | kirimkomen.addEventListener('click',function(e){
16 |     console.log(e);
17 |     ajaxKomen();
18 |     tekskomen.value="";
19 | })
20 | 
21 | 
22 | 
23 | let chat = setInterval(function(){
24 |     let limit = document.querySelectorAll('.komen-container').length;
25 |     if($(window).scrollTop()+$(window).height() >= ($(document).height() - 50)){
26 |         limit+=20;
27 |     }
28 | 
29 |     $.ajax({
30 |         url:"ajax/chat.php",
31 |         method:'post',
32 |         data:{
33 |             limit :limit
34 |         },
35 |         success : function(data){
36 |             chatarea.innerHTML = data;
37 |             let rowcount = document.querySelector('.rowcount');
38 |             if(rowcount.textContent < limit){
39 |                 let lastcomment = document.getElementById('last-comment')
40 |                 lastcomment.style.display = 'flex';
41 |                 hideLoading();
42 |             }
43 |             else if(rowcount.textContent == limit){
44 |                 showLoading();
45 |             }
46 |         },
47 |         error: function(data){
48 |             console.log(data);
49 |         }
50 |     })
51 | 
52 | },1000)
53 | 
54 | 
55 | 
56 | window.addEventListener('load',function(){
57 |     limit = 20;
58 |     setTimeout(function(){
59 |         document.body.style.overflow = 'visible';
60 |         document.getElementById("train-container").style.opacity = 0;
61 |     },1000)
62 | 
63 |     setTimeout(function(){
64 |         document.getElementById("train-container").style.display = 'none';
65 |         // document.getElementById("loading-container").style.height = '200px';
66 |         // document.getElementById("loading-container").style.backgroundColor = 'transparent';
67 |     },1500)
68 | },{once:true})
69 | 
70 | 


--------------------------------------------------------------------------------
/forum/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     color: #eee;
  6 |     color: #6C4AB6;
  7 | }
  8 | 
  9 | a{
 10 |     font-family: 'Poppins', sans-serif;
 11 |     color: inherit;
 12 |     font-size: 30px;
 13 |     display: flex;
 14 |     padding: 20px;
 15 |     box-sizing: border-box;
 16 | }
 17 | 
 18 | p{
 19 |     font-size: 14px;
 20 | }
 21 | 
 22 | h1{
 23 |     padding-left: 50px;
 24 | }
 25 | 
 26 | body{
 27 |     /* padding: 80px 0; */
 28 |     width: 100%;
 29 |     height: 100%;
 30 |     overflow: hidden;
 31 |     background: url("../img/forum-bg.png");
 32 |     /* background-size: auto; */
 33 | }
 34 | 
 35 | .nav *{
 36 |     color: #eee;
 37 | }
 38 | .nav{
 39 |     position: relative;
 40 |     height: 80px;
 41 |     /* background: linear-gradient(180deg, #7DE5ED, rgba(0,0,0,0)); */
 42 |     display: flex;
 43 |     justify-content: left;
 44 |     padding: 30px;
 45 |     align-items: center;
 46 | }
 47 | .profile_img{
 48 |     width: 40px;
 49 |     height: 40px;
 50 | }
 51 | 
 52 | 
 53 | .container{
 54 |     width: 100%;
 55 |     display: flex;
 56 |     justify-content: center;
 57 |     align-items: center;
 58 | }
 59 | .forum-container{
 60 |     width: 75%;
 61 |     display: flex;
 62 |     flex-direction: column;
 63 |     justify-content: center;
 64 |     align-items: center;
 65 |     border-radius: 10px;
 66 |     background-color: #8D72E1;
 67 | }
 68 | .forum-container .judul{
 69 |     padding-top: 20px;
 70 | }
 71 | .forum-container .subjudul{
 72 |     padding-bottom: 20px;
 73 | }
 74 | .forum-container .judul,.forum-container .subjudul{
 75 |     color: #eee;
 76 |     text-shadow: 0 0 3px #000;
 77 | }
 78 | 
 79 | .chat-area{
 80 |     width: 100%;
 81 |     display: flex;
 82 |     flex-direction: column; 
 83 |     justify-content: center;
 84 | }
 85 | .komen-container{
 86 |     width: 100%;
 87 |     padding: 10px 0;
 88 |     margin: 10px 0;
 89 |     padding: 10px 0;
 90 |     margin: 10px 0;
 91 |     display: flex;
 92 |     align-items: start;
 93 |     justify-content: start;
 94 | }
 95 | .komen-container.my-comment{
 96 |     width: 100%;
 97 |     padding: 10px 0;
 98 |     margin: 10px 0;
 99 |     display: flex;
100 |     align-items: start;
101 |     justify-content: end;
102 | }
103 | .profile-container{
104 |     height: 100%;
105 |     padding: 10px;
106 |     padding-top: 0;
107 |     display: flex;
108 |     align-items: start;
109 |     justify-content: center;
110 | }
111 | .profile_img{
112 |     width: 40px;
113 |     height: 40px;
114 |     border-radius: 50%;
115 |     box-shadow: 0 0 5px #eee;
116 | }
117 | .chat-container{
118 |     width: 40%;
119 |     height: 100%;
120 |     padding: 5px 20px 20px;
121 |     border-radius: 0 20px 0 20px;
122 |     box-shadow: 3px 3px 3px rgba(0,0,0,.25);
123 |     background-color: #eee;
124 |     display: flex;
125 |     flex-direction: column;
126 |     justify-content: space-between;
127 |     align-items: start;
128 | }
129 | .chat-container.my-comment{
130 |     background-color: lightgreen;
131 |     background-color: #B9E0FF;
132 |     border-radius: 20px 0 20px 0;
133 | }
134 | .chat-container .username{
135 |     font-weight: bold;
136 | }
137 | .header-komen{
138 |     width: 100%;
139 |     color: blue;
140 |     display: flex;
141 |     justify-content: space-between;
142 |     align-items: start;
143 |     font-size: 16px;
144 | }
145 | .tanggal{
146 |     font-size: 12px;
147 | }
148 | 
149 | 
150 | 
151 | .last-comment{
152 |     width: 100%;
153 |     padding: 50px 0;
154 |     align-items: center;
155 |     justify-content: center;
156 |     display: none;
157 | }
158 | 
159 | 
160 | 
161 | #komen{
162 |     position: fixed;
163 |     bottom: 0;
164 |     left: 0;
165 |     width: 100%;
166 |     padding: 10px;
167 |     box-sizing: border-box;
168 |     background: rgb(12,34,144);
169 |     background: linear-gradient(180deg, #6C4AB6 8%, rgba(53,99,220,1) 38%, rgba(26,87,244,1) 61%, rgba(49,13,171,1) 90%); 
170 |     display: flex;
171 |     justify-content: space-between;
172 |     z-index: 2;
173 | }
174 | input{
175 |     width: 90%;
176 |     padding: 7px 10px;
177 |     padding-left: 15px;
178 |     font-size: 16px;
179 |     border-radius: 15px;
180 |     border: none;
181 |     outline: none;
182 |     background-color: #eee;
183 |     box-shadow: 0 0 2px #6C4AB6;
184 | }
185 | input:focus{
186 |     box-shadow: 0 0 2px #6C4AB6;
187 | }
188 | input::placeholder{
189 |     color: #6C4AB6;
190 |     font-size: 14px;
191 | }
192 | button{
193 |     width: 8%;
194 |     padding: 5px 10px;
195 |     border-radius: 15px;
196 |     border: none;
197 |     outline: none;
198 |     background-color: #6C4AB6;
199 |     color: #eee;
200 |     box-shadow: 0 0 3px #eee;
201 |     cursor: pointer;
202 | }
203 | 
204 | 
205 | 
206 | 
207 | /* Loader */
208 | .loading-container{
209 |     position: relative;
210 |     width: 100%;
211 |     height: 200px;
212 |     top: 0;
213 |     background-color: #eee;
214 |     background-color: transparent;
215 |     display: flex;
216 |     align-items: center;
217 |     justify-content: center;
218 |     transition: .3s;
219 |     opacity: 0;
220 | }
221 | 
222 | .loading-outer{
223 |     width: 50px;
224 |     height: 50px;
225 |     border-radius: 50%;
226 |     border: 5px solid transparent;
227 |     display : flex;
228 |     justify-content: center;
229 |     align-items: center;
230 |     border-left-color: #6C4AB6;
231 |     border-top-color: #B9E0FF;
232 |     border-right-color: #FFE15D;
233 |     animation: rotate-outer 1.5s ease-in infinite forwards;
234 |     position: relative;
235 |     transition: .5s;
236 | }
237 | .loading-inner{
238 |     width: 35px;
239 |     height: 35px;
240 |     border-radius: inherit;
241 |     border: 5px solid #eee;
242 |     border-top-color: transparent;
243 |     border-bottom-color: transparent;
244 |     animation: rotate-inner 1.5s ease-in infinite forwards;
245 |     position: absolute;
246 |     transition: .5s;
247 | }
248 | 
249 | @keyframes rotate-outer {
250 |     0%{
251 |         transform: rotate(0deg);
252 |     }
253 |     50%{
254 |         transform: rotate(200deg);
255 |     }
256 |     100%{
257 |         transform: rotate(360deg);
258 |     }
259 | }
260 | 
261 | @keyframes rotate-inner {
262 |     0%{
263 |         transform: rotate(0deg);
264 |     }
265 |     50%{
266 |         transform: rotate(-100deg);
267 |     }
268 |     100%{
269 |         transform: rotate(360deg);
270 |     }
271 | }
272 | 
273 | 
274 | 


--------------------------------------------------------------------------------
/forum/train-style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 | }
  5 | .train-container{
  6 |     background-color: #eee;
  7 |     position: fixed;
  8 |     top: 0;
  9 |     right: 0;
 10 |     left: 0;
 11 |     width: 100%;
 12 |     height: 100%;
 13 |     display: flex;
 14 |     justify-content:center;
 15 |     align-items: center;
 16 |     z-index: 3;
 17 |     transition: 0.3s;
 18 | }
 19 | 
 20 | .container {
 21 |     position: relative;
 22 |     display: flex;
 23 |     flex-direction: column;
 24 |     align-items: center;
 25 |     justify-content: center;
 26 |     text-align: center;
 27 | }
 28 | 
 29 | .container *{
 30 |     box-sizing:content-box !important;
 31 | }
 32 |   
 33 | .content {
 34 |     position: relative;
 35 |     width: 400px;
 36 |     height: 400px; 
 37 |     overflow: hidden;
 38 |     display: flex;
 39 |     align-items: center;
 40 |     justify-content: center;
 41 | }
 42 | 
 43 | .track {
 44 |     position: absolute;
 45 |     width:400px;
 46 |     height:5px;
 47 |     background-color: #333;
 48 |     top:300px;
 49 | }
 50 | 
 51 | .track:before {
 52 |     content:"";
 53 |     position: absolute;
 54 |     width:10px;
 55 |     height:5px;
 56 |     background-color: #333;
 57 |     top:4px;
 58 |     box-shadow: 20px 0 #333, -20px 0 #333, -40px 0 #333, -60px 0 #333, -80px 0 #333, 40px 0 #333, 60px 0 #333, 80px 0 #333, 100px 0 #333, 120px 0 #333, 140px 0 #333, 160px 0 #333, 180px 0 #333, 200px 0 #333, 220px 0 #333, 240px 0 #333, 260px 0 #333, 280px 0 #333, 300px 0 #333, 320px 0 #333, 340px 0 #333, 360px 0 #333, 380px 0 #333, 400px 0 #333, 420px 0 #333, 440px 0 #333, -100px 0 #333, -120px 0 #333, -140px 0 #333, 460px 0 #333, 480px 0 #333;
 59 |     animation: move 1s linear infinite reverse;
 60 | }
 61 |   
 62 | @keyframes move {  
 63 |     from { left: -100px; }
 64 |       to { left: 100px; }
 65 | }
 66 |   
 67 | .train {
 68 |     position: absolute;
 69 |     width: 50px;
 70 |     height: 30px;
 71 |     border:5px solid #333;
 72 |     background-color: #8D72E1;
 73 |     border-radius:0 10px 0 0;
 74 |     top:230px;
 75 |     left:285px;
 76 |     animation: scale 1s linear infinite;
 77 | }
 78 |   
 79 | @keyframes scale {
 80 |     0% {transform: scaleY(1);}
 81 |     50% {transform: scaleY(0.99);}
 82 |     100% {transform: scaleY(1);}
 83 | }
 84 |   
 85 | .train:before {
 86 |     content:"";
 87 |     position: absolute;
 88 |     border:5px solid #333;
 89 |     background-color: #8D9EFF;
 90 |     width:35px;
 91 |     height:60px;
 92 |     left:-45px;
 93 |     top:-35px;
 94 | }
 95 |   
 96 | .train:after {
 97 |     position: absolute;
 98 |     content:"";
 99 |     width: 100px;
100 |     height:5px;
101 |     border-radius:10px;
102 |     border: 5px solid #333;
103 |     background-color: #07dbd4;
104 |     top:30px;
105 |     left:-50px;
106 | }
107 |   
108 | .front {
109 |     position: absolute;
110 |     border: 5px solid #333;
111 |     background-color: #aed9e0;
112 |     box-shadow: inset 2px -5px rgba(255,255,255,0.3);
113 |     width:20px;
114 |     height:30px;
115 |     left:-37.5px;
116 |     top:-20px;
117 | }
118 |   
119 | .front:before {
120 |     content:"";
121 |     position: absolute;
122 |     background-color: #333;
123 |     width:15px;
124 |     height:5px;
125 |     border-radius:10px;
126 |     top: 25px;
127 |     left:70px;
128 |     box-shadow: 0px 10px #333, -50px -45px #333, -86px -45px #333, -22px -41px #333,-11px -41px #333;
129 | }
130 |   
131 | .front:after {
132 |     content:"";
133 |     position: absolute;
134 |     width:12px;
135 |     height:20px;
136 |     border: 5px solid #333;
137 |     left:50px;
138 |     top:-16px;
139 |     background-color:#adb5bd;
140 | }
141 |   
142 | .wheels {
143 |     position: absolute;
144 |     z-index:1;
145 | }
146 |   
147 | .smallOne, .smallTwo, .smallThree, .smallFour, .smallFive, .smallSix {
148 |     position: absolute;
149 |     border: 5px solid #333;
150 |     border-radius:50%;
151 |     width: 15px;
152 |     height:15px;
153 |     top:40px;
154 |     background-color: #0a125a;
155 |     box-shadow: inset 2px 2px white;
156 |     z-index:2;
157 | }
158 |   
159 | .smallOne {
160 |     left: 30px;
161 |     animation: spin .5s infinite linear;
162 | }
163 |   
164 | .smallTwo {
165 |     left:0;
166 |     animation: spin .5s infinite linear;
167 | }
168 |   
169 | .smallThree {
170 |     left:-225px;
171 |     animation: spin .5s infinite linear;
172 | }
173 |   
174 | .smallFour {
175 |     left:-190px;
176 |     animation: spin .5s infinite linear;
177 | }
178 |   
179 | .smallFive {
180 |     left:-130px;
181 |     animation: spin .5s infinite linear;
182 | }
183 |   
184 | .smallSix {
185 |     left:-95px;
186 |     animation: spin .5s infinite linear;
187 | }
188 |   
189 | .big {
190 |     position: absolute;
191 |     border: 5px solid #333;
192 |     border-radius:50%;
193 |     width:25px;
194 |     height:25px;
195 |     background-color: #251574;
196 |     box-shadow: inset 2px 2px white;
197 |     top:30px;
198 |     left:-40px;
199 |     animation: spin .5s infinite linear;
200 | }
201 |   
202 | .cord {
203 |     position: absolute;
204 |     width: 10px;
205 |     height:5px;
206 |     background-color: #333;
207 |     top:35px;
208 |     left:-59px;
209 |     z-index:3;
210 | }
211 |   
212 | .cord:before {
213 |     content:"";
214 |     position: absolute;
215 |     height:5px;
216 |     width: 70px;
217 |     background-color: #333;
218 |     top:15px;
219 |     left:35px;
220 | }
221 |   
222 | .cord:after {
223 |     content:"";
224 |     position: absolute;
225 |     background-color: #333;
226 |     border-radius:50%;
227 |     width:15px;
228 |     height:15px;
229 |     top:5px;
230 |     left:29px;
231 | }
232 |   
233 | .coach {
234 |     position: absolute;
235 |     width:80px;
236 |     height:60px;
237 |     border:5px solid #333;
238 |     background-color: #8D72E1;
239 |     left:-145px;
240 |     top:-20px;
241 | }
242 |   
243 | .coach:before {
244 |     content:"";
245 |     position: absolute;
246 |     width: 10px;
247 |     height:5px;
248 |     background-color: #333;
249 |     top:50px;
250 |     left:-15px;
251 |   }
252 |   
253 | .coach:after {
254 |     content:"";
255 |     position: absolute;
256 |     width:80px;
257 |     height:60px;
258 |     border:5px solid #333;
259 |     background-color: #8D9EFF;
260 |     top:-5px;
261 |     left:-100px;
262 | }
263 |   
264 | .coachTwo {
265 |     position: absolute;
266 |     border:5px solid #333;
267 |     background-color: #aed9e0;
268 |     box-shadow: inset 2px -5px rgba(255,255,255,0.3);
269 |     width: 15px;
270 |     height:25px;
271 |     left:-225px;
272 |     top:-5px;
273 | }
274 |   
275 | .coachTwo:before, .coachTwo:after {
276 |     content:"";
277 |     position: absolute;
278 |     border:5px solid #333;
279 |     background-color: #aed9e0;
280 |     box-shadow: inset 2px -5px rgba(255,255,255,0.3);
281 |     width: 15px;
282 |     height:25px;
283 |     top:-5px;
284 | }
285 |   
286 | .coachTwo:before {
287 |     left:30px;
288 | }
289 |   
290 | .coachTwo:after {
291 |     left:90px;
292 | }
293 |   
294 | .windows {
295 |     position: absolute;
296 |     border:5px solid #333;
297 |     background-color: #aed9e0;
298 |     box-shadow: inset 2px -5px rgba(255,255,255,0.3);
299 |     width: 15px;
300 |     height:25px;
301 |     left:-95px;
302 |     top:-5px;
303 |     z-index:6;
304 | }
305 |   
306 | .windows:before {
307 |     content:"";
308 |     position: absolute;
309 |     background-color: #333;
310 |     height:5px;
311 |     width: 95px;
312 |     border-radius:10px;
313 |     top:-20px;
314 |     left:-153px;
315 |     box-shadow: 95px 0px #333;
316 | }
317 |   
318 | .windows:after {
319 |     content:"";
320 |     position: absolute;
321 |     background-color: #333;
322 |     height:5px;
323 |     width:40px;
324 |     top:51px;
325 |     left:-125px;
326 |     box-shadow: 95px 0 #333;
327 | }
328 |   
329 | @keyframes spin {
330 |     from { transform: rotate(0deg); }
331 |     to { transform: rotate(360deg); }
332 | }
333 |   
334 | #up {
335 |     position: absolute;
336 |     width: 20px;
337 |     height: 20px;
338 |     background-color: #8D72E1;
339 |     border-radius: 50%;
340 |     opacity: 0;
341 |     top: -30px;
342 |     left: 25.5px;
343 |     z-index:-1;
344 | }
345 |   
346 | .steam {
347 |     animation: up 2.5s ease-out infinite; 
348 | }
349 |   
350 | .steam2 {
351 |     animation: up 1.7s ease-out infinite 1s; 
352 | }
353 |   
354 | .steam2:before {
355 |     content:"";
356 |     position: absolute;
357 |     left:5px;
358 |     width:15px;
359 |     height:15px;
360 |     background-color: #fff;
361 |     border-radius:50%;
362 |     top:20px;
363 | }
364 |   
365 | @keyframes up {
366 |     0%{
367 |       transform: translateY(0) translateX(0) scale(0.5);
368 |       opacity: 1;
369 |     }
370 |     100%{
371 |       transform: translateY(-110px) translateX(-80px) scale(1.5);
372 |       opacity: 0.2;
373 |     }
374 | }


--------------------------------------------------------------------------------
/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/bg.jpg


--------------------------------------------------------------------------------
/img/eye-fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
2 |   <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
3 |   <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
4 | </svg>


--------------------------------------------------------------------------------
/img/eye.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
2 |   <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
3 |   <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
4 | </svg>


--------------------------------------------------------------------------------
/img/forum-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/forum-bg.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/logo.png


--------------------------------------------------------------------------------
/img/logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/logo2.png


--------------------------------------------------------------------------------
/img/math.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/math.png


--------------------------------------------------------------------------------
/img/pfp/pfp1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp1.png


--------------------------------------------------------------------------------
/img/pfp/pfp10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp10.png


--------------------------------------------------------------------------------
/img/pfp/pfp11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp11.png


--------------------------------------------------------------------------------
/img/pfp/pfp12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp12.png


--------------------------------------------------------------------------------
/img/pfp/pfp13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp13.png


--------------------------------------------------------------------------------
/img/pfp/pfp14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp14.png


--------------------------------------------------------------------------------
/img/pfp/pfp15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp15.png


--------------------------------------------------------------------------------
/img/pfp/pfp16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp16.png


--------------------------------------------------------------------------------
/img/pfp/pfp2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp2.png


--------------------------------------------------------------------------------
/img/pfp/pfp3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp3.png


--------------------------------------------------------------------------------
/img/pfp/pfp4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp4.png


--------------------------------------------------------------------------------
/img/pfp/pfp5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp5.png


--------------------------------------------------------------------------------
/img/pfp/pfp6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp6.png


--------------------------------------------------------------------------------
/img/pfp/pfp7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp7.png


--------------------------------------------------------------------------------
/img/pfp/pfp8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp8.png


--------------------------------------------------------------------------------
/img/pfp/pfp9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/pfp/pfp9.png


--------------------------------------------------------------------------------
/img/word.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gunzxx/Train-Key/2469740da0d644751ab0ad4272f0abb7990353d1/img/word.png


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <?php 
  2 | include "core/database.php";
  3 | require_once "core/function.php";
  4 | cekSesi("login.php");
  5 | 
  6 | 
  7 | $con = new Database();
  8 | $query = "SELECT u.nick_name as 'nick_name', p.high_poin as 'high_poin', p.tanggal as 'tanggal', u.profile_image , u.user_id as user_id
  9 |             FROM poin as p 
 10 |             JOIN user u USING(user_id) 
 11 |             ORDER BY high_poin DESC, tanggal ASC
 12 |             LIMIT 10";
 13 | $con->query($query);
 14 | $users = $con->getAssoc();
 15 | 
 16 | // echo $_SESSION['trainkey_id  '];
 17 | $query = "SELECT * FROM user as u join poin as p using(user_id) WHERE u.user_id = '{$_SESSION['trainkey_id']}';";
 18 | $con->query($query);
 19 | $user = $con->getSingle();
 20 | 
 21 | 
 22 | // var_dump($_COOKIE);
 23 | ?>
 24 | 
 25 | 
 26 | 
 27 | <!DOCTYPE html>
 28 | <html lang="en">
 29 | <head>
 30 |     <meta charset="UTF-8">
 31 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 32 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 33 |     <title>Train Key</title>
 34 |     <link rel="icon" type="image/x-icon" href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/img/logo.png">
 35 |     <link rel="stylesheet" href="css/style.css">
 36 |     <link rel="stylesheet" href="css/main.css">
 37 | </head>
 38 | <body>
 39 |     <!-- Navbar -->
 40 |     <nav class="nav">
 41 |         <a href="" class="brand">
 42 |             <img src="img/logo.png" alt="" width="70px">
 43 |             <h1>Train Key</h1>
 44 |         </a>
 45 |         <div class="sub-nav">
 46 |             <a class="nav-list" href="forum" target="_blank">
 47 |                 <p>Forum</p>
 48 |             </a>
 49 |             <a class="nav-list">
 50 |                 <p>Help & Support</p>
 51 |             </a>
 52 |             <a class="nav-list">
 53 |                 <p>Documentation</p>
 54 |             </a>
 55 |         </div>
 56 |         <div class="profile-container">
 57 |             <img src="img/pfp/pfp<?=$user['profile_image'] ?>.png" alt="" class="profile" id="profile">
 58 |         </div>
 59 |     </nav>
 60 |     <!-- End Navbar -->
 61 | 
 62 |     <div class="profile-menu" id="profile-menu">
 63 |         <a class="menu" href="editprofil">Edit profile</a>
 64 |         <a class="menu" id="logoutbtn">Logout</a>
 65 |     </div>
 66 | 
 67 |     <!-- BOX -->
 68 |     <div class="box-container">
 69 |         <!-- Rank -->
 70 |         <div class="itembox1">
 71 |             <div class="rank-container">
 72 |                 <h3 class="text-center">Rank</h3>
 73 |                 <input type="text" id="search" class="search" placeholder="Cari user">
 74 |                 <table class="rank" id="rank">
 75 |                     <thead>
 76 |                         <td>No.</td>
 77 |                         <td colspan="2" style="text-align: center;">Nama</td>
 78 |                         <td>Poin</td>
 79 |                         <!-- <td>Tanggal</td> -->
 80 |                     </thead>
 81 |                     <tbody id="rank_body" class="rank-body">
 82 |                         <?php foreach($users as $k => $v) {?>
 83 |                             <?php if($v['user_id'] == $_SESSION['trainkey_id']){ ?>
 84 |                                 <tr style="background-color:green;">
 85 |                                     <td class="no"><?=$k+1 ?></td>
 86 |                                     <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
 87 |                                     <td class="img"><?=$v['nick_name'] ?></td>
 88 |                                     <td class="data"><?=$v['high_poin'] ?></td>
 89 |                                     <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
 90 |                                 </tr>
 91 |                             <?php } ?>
 92 |                             <?php if($v['user_id'] != $_SESSION['trainkey_id']){ ?>
 93 |                                 <tr>
 94 |                                     <td class="no"><?=$k+1 ?></td>
 95 |                                     <td><img width="20px" height="20px" src="img/pfp/pfp<?=$v['profile_image']?>.png" alt=""></td>
 96 |                                     <td class="img"><?=$v['nick_name'] ?></td>
 97 |                                     <td class="data"><?=$v['high_poin'] ?></td>
 98 |                                     <!-- <td class="data" style="font-size:12px;"><?=$v['tanggal'] ?></td> -->
 99 |                                 </tr>
100 |                             <?php } ?>
101 |                         <?php } ?>
102 |                     </tbody>
103 |                 </table>
104 |                 <p class="showall" id="showall">Show all</p>
105 |             </div>
106 |         </div>
107 |         <!-- End Rank -->
108 |         
109 |         <!-- Game container -->
110 |         <div id="gamecontainer" class="game-container itembox2">
111 |             
112 | 
113 |             <!-- Sample Teks -->
114 |             <div class="teksLabel" id="sampleTeksContainer">
115 |                 <p class="kata kata0"></p><span>&nbsp;</span>
116 |                 <p class="kata kata1"></p><span>&nbsp;</span>
117 |                 <p class="kata kata2"></p><span>&nbsp;</span>
118 |                 <p class="kata kata3">Masih loading harap sabar....</p><span>&nbsp;</span>
119 |                 <p class="kata kata4"></p><span>&nbsp;</span>
120 |                 <p class="kata kata5"></p><span>&nbsp;</span>
121 |                 <p class="kata kata6"></p><span>&nbsp;</span>
122 |                 <p class="kata kata7"></p><span>&nbsp;</span>
123 |                 <p class="kata kata8"></p><span>&nbsp;</span>
124 |                 <p class="kata kata9"></p>
125 |             </div>
126 |             <!-- End Sample Teks -->
127 |             
128 |             
129 |             <!-- User Input -->
130 |             <input id="userInput" autocomplete="off" placeholder="Tunggu ya :>" disabled="">
131 |             <!-- End User Input -->
132 |             
133 |             
134 |             <!-- Timer -->
135 |             <div class="timer" id="countdown-container">
136 |                 <p class="timerTeks text-center" id="countdown">60</p>
137 |                 <button id="restart">Restart</button>
138 |             </div>
139 |             <!-- End Timer -->
140 |             
141 |         </div>
142 |         <!-- End Game contain -->
143 |         
144 |         
145 |         <!-- Poin -->
146 |         <div class="score-container itembox3">
147 |             <table class="score">
148 |                 <tbody>
149 |                     <tr>
150 |                         <td class="col1"><p>Banyak huruf diketik : </p></td>
151 |                         <td class="col2"><p id="huruf" name="poinNow" value="">0</p></td>
152 |                     </tr>
153 |                     <tr>
154 |                         <td class="col1"><p>Benar : </p></td>
155 |                         <td class="col2"><p id="benar" name="highPoin" value="10">0</p></td>
156 |                     </tr>
157 |                     <tr>
158 |                         <td class="col1"><p>Salah : </p></td>
159 |                         <td class="col2"><p id="salah" name="highPoin" value="10">0</p></td>
160 |                     </tr>
161 |                     <tr>
162 |                         <td class="col1"><p>Poin : </p></td>
163 |                         <td class="col2"><p id="poin" name="highPoin" value="10">0</p></td>
164 |                     </tr>
165 |                     <tr>
166 |                         <td class="col1"><p>Poin tertinggi : </p></td>
167 |                         <td class="col2"><p id="high_poin" name="high_poin" value="10"><?=$user['high_poin'] ?></p></td>
168 |                     </tr>
169 |                 </tbody>
170 |             </table>
171 |         </div>
172 |         <!-- End Poin -->
173 |     </div>
174 |     <!-- End BOX -->
175 |     
176 |     <!-- <?=$user['user_id'] ?> -->
177 |     <span id="user_id" style="display: none;"><?=$user['user_id'] ?></span>
178 |     
179 |     
180 |     <script src="js/jquery.min.js"></script>
181 |     <script src="js/function.js"></script>
182 |     <script src="js/data.js"></script>
183 |     <script src="js/main.js"></script>
184 | </body>
185 | </html>


--------------------------------------------------------------------------------
/js/data.js:
--------------------------------------------------------------------------------
   1 | let abjad = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
   2 | let abjadstr = abjad.join("");
   3 | abjadstr += "_";
   4 | let kamus = [
   5 |     'aku',
   6 |     'akhirulkalam',
   7 |     'alhamdulillah',
   8 |     'apabila',
   9 |     'astagfirullah',
  10 |     'bagaimana',
  11 |     'barangkali',
  12 |     'bilamana',
  13 |     'bismillah',
  14 |     'beasiswa',
  15 |     'belasungkawa',
  16 |     'bumiputra',
  17 |     'daripada',
  18 |     'darmabakti',
  19 |     'darmasiswa',
  20 |     'dukacita',
  21 |     'halalbihalal',
  22 |     'hulubalang',
  23 |     'kacamata',
  24 |     'kasatmata',
  25 |     'kepada',
  26 |     'keratabasa',
  27 |     'kosakata',
  28 |     'lokakarya',
  29 |     'manakala',
  30 |     'manasuka',
  31 |     'mangkubumi',
  32 |     'marabahaya',
  33 |     'matahari',
  34 |     'olahraga',
  35 |     'padahal',
  36 |     'paramasastra',
  37 |     'puspawarna',
  38 |     'radioaktif',
  39 |     'sastramarga',
  40 |     'saputangan',
  41 |     'saripati',
  42 |     'sebagaimana',
  43 |     'sediakala',
  44 |     'segitiga',
  45 |     'silaturahmi',
  46 |     'sukacita',
  47 |     'sukarela',
  48 |     'sukaria',
  49 |     'syahbandar',
  50 |     'titimangsa',
  51 |     'wasalam',
  52 |     'ekabahasa',
  53 |     'dwibahasa',
  54 |     'tridarma',
  55 |     'tritunggal',
  56 |     'caturwarga',
  57 |     'caturwulan',
  58 |     'pancaindra',
  59 |     'Pancasila',
  60 |     'saptakrida',
  61 |     'saptapesona',
  62 |     'dasatitah',
  63 |     'dasawarsa',
  64 |     'kilogram',
  65 |     'megawatt',
  66 |     'terabita',
  67 |     'gigaohm',
  68 |     'sentimeter',
  69 |     'mikroorganisme',
  70 |     'km',
  71 |     'amoral',
  72 |     'asusila',
  73 |     'antarnegara',
  74 |     'antarwarga',
  75 |     'ekstrakurikuler',
  76 |     'kontrarevolusi',
  77 |     'mahaagung',
  78 |     'maha pengasih',
  79 |     'nonblok',
  80 |     'non-Indonesia',
  81 |     'perilaku',
  82 |     'peri keadilan',
  83 |     'pascapanen',
  84 |     'semiprofesional',
  85 |     'subbagian',
  86 |     'supersibuk',
  87 |     'tunakarya',
  88 |     'ultramodern',
  89 |     'abrasi',
  90 |     'absorsi',
  91 |     'accu',
  92 |     'adap',
  93 |     'adegio',
  94 |     'adesi',
  95 |     'aditorium',
  96 |     'admin',
  97 |     'adpokat',
  98 |     'advent',
  99 |     'adzan',
 100 |     'afdol',
 101 |     'agamis',
 102 |     'ajeg',
 103 |     'ajektif',
 104 |     'ajimat',
 105 |     'akhirul',
 106 |     'aktuil',
 107 |     'alfa',
 108 |     'aliyah',
 109 |     'alpha',
 110 |     'amandemen',
 111 |     'amben',
 112 |     'ambeyen',
 113 |     'ambulan',
 114 |     'amirulhaj',
 115 |     'amper',
 116 |     'analisa',
 117 |     'anestesia',
 118 |     'anoda',
 119 |     'ansambel',
 120 |     'antar',
 121 |     'antene',
 122 |     'antri',
 123 |     'aparatur',
 124 |     'aplus',
 125 |     'apostrop',
 126 |     'apotik',
 127 |     'aquades',
 128 |     'arbiter',
 129 |     'asal',
 130 |     'aseptor',
 131 |     'asesori',
 132 |     'ashar',
 133 |     'astronot',
 134 |     'atheis',
 135 |     'atmosfir',
 136 |     'atret',
 137 |     'audiens',
 138 |     'auliya',
 139 |     'autobiografi',
 140 |     'automatis',
 141 |     'azas',
 142 |     'balance',
 143 |     'baligh',
 144 |     'balsem',
 145 |     'bandrol',
 146 |     'bangker',
 147 |     'bapaknda',
 148 |     'baqa',
 149 |     'barzah',
 150 |     'batalyon',
 151 |     'baterei',
 152 |     'bathil',
 153 |     'bazaar',
 154 |     'belangko',
 155 |     'belender',
 156 |     'bemper',
 157 |     'bengkoang',
 158 |     'bensol',
 159 |     'bergajul',
 160 |     'berjanji',
 161 |     'berterbanga',
 162 |     'BH',
 163 |     'bhayangkara',
 164 |     'bhiku',
 165 |     'bilyar',
 166 |     'bilyun',
 167 |     'binatu',
 168 |     'biosfir',
 169 |     'birahi',
 170 |     'bis',
 171 |     'bisep',
 172 |     'blacu',
 173 |     'blantika',
 174 |     'blokir',
 175 |     'bolpoint',
 176 |     'bombon',
 177 |     'bonafid',
 178 |     'bongkok',
 179 |     'bowling',
 180 |     'braile',
 181 |     'brandal',
 182 |     'brangkas',
 183 |     'breidel',
 184 |     'brengsek',
 185 |     'brewok',
 186 |     'bromocorah',
 187 |     'bronkitis',
 188 |     'budeg',
 189 |     'budget',
 190 |     'bumiputera',
 191 |     'bungalow',
 192 |     'cabe',
 193 |     'cafetaria',
 194 |     'cap',
 195 |     'cape',
 196 |     'cendikia',
 197 |     'cengkeh',
 198 |     'cengkram',
 199 |     'cengkrama',
 200 |     'chlor',
 201 |     'cidera',
 202 |     'cigaret',
 203 |     'cinderamata',
 204 |     'clash',
 205 |     'clien',
 206 |     'closet',
 207 |     'club',
 208 |     'clurit',
 209 |     'cockpit',
 210 |     'cocktail',
 211 |     'coklat',
 212 |     'combro',
 213 |     'cumulus',
 214 |     'dai',
 215 |     'dawah',
 216 |     'debet',
 217 |     'debitur',
 218 |     'defiasi',
 219 |     'degresi',
 220 |     'dekrit',
 221 |     'deodorant',
 222 |     'depo',
 223 |     'depolitisir',
 224 |     'deputy',
 225 |     'design',
 226 |     'despenser',
 227 |     'destilasi',
 228 |     'deterjen',
 229 |     'detil',
 230 |     'deviden',
 231 |     'dharma',
 232 |     'dhoif',
 233 |     'dhuhur',
 234 |     'diagnosa',
 235 |     'dioda',
 236 |     'disco',
 237 |     'disersi',
 238 |     'diskotik',
 239 |     'diskripsi',
 240 |     'dollar',
 241 |     'domain',
 242 |     'donatur',
 243 |     'dopping',
 244 |     'dramatisir',
 245 |     'drum',
 246 |     'dumping',
 247 |     'duren',
 248 |     'dzat',
 249 |     'dzikir',
 250 |     'eksebisi',
 251 |     'eksim',
 252 |     'eksport',
 253 |     'ekstrim',
 254 |     'ekwivalen',
 255 |     'elektroda',
 256 |     'elip',
 257 |     'elit',
 258 |     'empek',
 259 |     'engine',
 260 |     'ensiklopedia',
 261 |     'ephos',
 262 |     'episod',
 263 |     'erobatik',
 264 |     'esen',
 265 |     'essay',
 266 |     'ethanol',
 267 |     'faham',
 268 |     'fak',
 269 |     'faksimil',
 270 |     'faksinasi',
 271 |     'fakum',
 272 |     'falid',
 273 |     'familiar',
 274 |     'faqih',
 275 |     'farmakop',
 276 |     'fas',
 277 |     'ferri',
 278 |     'filsof',
 279 |     'finish',
 280 |     'fitoksoid',
 281 |     'foklor',
 282 |     'formil',
 283 |     'foto',
 284 |     'foto',
 285 |     'fotosintesa',
 286 |     'frasa',
 287 |     'frekwensi',
 288 |     'frigit',
 289 |     'fron',
 290 |     'frustasi',
 291 |     'galaktose',
 292 |     'galleri',
 293 |     'gamma',
 294 |     'gasal',
 295 |     'geladi',
 296 |     'gendewa',
 297 |     'geneologi',
 298 |     'genius',
 299 |     'genteng',
 300 |     'gep',
 301 |     'gepok',
 302 |     'gerejani',
 303 |     'geyser',
 304 |     'ghaib',
 305 |     'gip',
 306 |     'gladi',
 307 |     'glamour',
 308 |     'glondong',
 309 |     'glosary',
 310 |     'glukoma',
 311 |     'glukosa',
 312 |     'goa',
 313 |     'goncang',
 314 |     'gono',
 315 |     'grebek',
 316 |     'greget',
 317 |     'grendel',
 318 |     'griya',
 319 |     'grogol',
 320 |     'gross',
 321 |     'gudeg',
 322 |     'guide',
 323 |     'gulabit',
 324 |     'hadist',
 325 |     'hakekat',
 326 |     'hal',
 327 |     'handaitaulan',
 328 |     'handal',
 329 |     'hapal',
 330 |     'hektar',
 331 |     'hembus',
 332 |     'hempas',
 333 |     'hetrogen',
 334 |     'hidrolis',
 335 |     'higiena',
 336 |     'himbau',
 337 |     'himpit',
 338 |     'hingar',
 339 |     'hipermetri',
 340 |     'hipotesa',
 341 |     'hipotik',
 342 |     'hipovitamin',
 343 |     'hirarki',
 344 |     'hiroglif',
 345 |     'hisap',
 346 |     'honocoroko',
 347 |     'husada',
 348 |     'hutang',
 349 |     'hybrida',
 350 |     'hymne',
 351 |     'itibar',
 352 |     'itikaf',
 353 |     'ibtidaiyah',
 354 |     'iddah',
 355 |     'idiil',
 356 |     'idiologi',
 357 |     'ijasah',
 358 |     'ijin',
 359 |     'ijma',
 360 |     'ikhwal',
 361 |     'iklas',
 362 |     'illusi',
 363 |     'import',
 364 |     'incognito',
 365 |     'income',
 366 |     'influensa',
 367 |     'infra',
 368 |     'ingkarsunah',
 369 |     'inkar',
 370 |     'innalillahiwa',
 371 |     'inpus',
 372 |     'instink',
 373 |     'insyaf',
 374 |     'intel',
 375 |     'intelejensi',
 376 |     'inten',
 377 |     'intercontine',
 378 |     'interest',
 379 |     'intermezo',
 380 |     'internist',
 381 |     'interograsi',
 382 |     'interospeksi',
 383 |     'interplasi',
 384 |     'interprestasi',
 385 |     'introver',
 386 |     'intrupsi',
 387 |     'inventarisir',
 388 |     'inzet',
 389 |     'ionosfir',
 390 |     'iradah',
 391 |     'irasionil',
 392 |     'Islamiyah',
 393 |     'isra',
 394 |     'isteri',
 395 |     'istighfar',
 396 |     'istinja',
 397 |     'istiqomah',
 398 |     'Itali',
 399 |     'jadah',
 400 |     'jaelangkung',
 401 |     'jagad',
 402 |     'jahiliyah',
 403 |     'jaman',
 404 |     'jejer',
 405 |     'jemaah',
 406 |     'jenasah',
 407 |     'jendral',
 408 |     'jenius',
 409 |     'jep',
 410 |     'jerapah',
 411 |     'jerembap',
 412 |     'jiujitsu',
 413 |     'jizim',
 414 |     'jogging',
 415 |     'joint',
 416 |     'jor',
 417 |     'jubilum',
 418 |     'jungtur',
 419 |     'jus',
 420 |     'kabah',
 421 |     'kaburasi',
 422 |     'kaburator',
 423 |     'kaca',
 424 |     'kadaluwarsa',
 425 |     'kaedah',
 426 |     'kaffah',
 427 |     'kahyangan',
 428 |     'kakatua',
 429 |     'kaleidioskop',
 430 |     'kalkarim',
 431 |     'kamboja',
 432 |     'kameramen',
 433 |     'kamuplase',
 434 |     'kangguru',
 435 |     'kangker',
 436 |     'kantung',
 437 |     'kaos',
 438 |     'kasep',
 439 |     'katagori',
 440 |     'kataketis',
 441 |     'katalepsia',
 442 |     'katalisa',
 443 |     'kate',
 444 |     'Katholik',
 445 |     'katoda',
 446 |     'katring',
 447 |     'keburu',
 448 |     'kecoak',
 449 |     'kedele',
 450 |     'keji',
 451 |     'kekawin',
 452 |     'kelakatu',
 453 |     'kelar',
 454 |     'kelenger',
 455 |     'kelep',
 456 |     'kemana',
 457 |     'kenalpot',
 458 |     'kendor',
 459 |     'kenop',
 460 |     'kerapan',
 461 |     'kerawitan',
 462 |     'kerdip',
 463 |     'kerdus',
 464 |     'kerjasama',
 465 |     'kerol',
 466 |     'kesturi',
 467 |     'ketapel',
 468 |     'ketawa',
 469 |     'ketemu',
 470 |     'kharisma',
 471 |     'khaul',
 472 |     'kilo',
 473 |     'klemak',
 474 |     'klengkeng',
 475 |     'klenik',
 476 |     'kleptomania',
 477 |     'klop',
 478 |     'klorofil',
 479 |     'kloter',
 480 |     'kluwak',
 481 |     'kluwih',
 482 |     'knop',
 483 |     'koboy',
 484 |     'kocar',
 485 |     'kolomnis',
 486 |     'komersil',
 487 |     'komfirmasi',
 488 |     'komoditi',
 489 |     'komplit',
 490 |     'konggres',
 491 |     'kongkow',
 492 |     'kongkret',
 493 |     'konsekwen',
 494 |     'konsleting',
 495 |     'kontinyu',
 496 |     'koordinir',
 497 |     'korden',
 498 |     'korma',
 499 |     'korp',
 500 |     'kosmonot',
 501 |     'kram',
 502 |     'kramat',
 503 |     'kreatifitas',
 504 |     'kremi',
 505 |     'kresek',
 506 |     'kretek',
 507 |     'krew',
 508 |     'krucil',
 509 |     'kulintang',
 510 |     'kumpul',
 511 |     'kung',
 512 |     'kuno',
 513 |     'kurnia',
 514 |     'kusen',
 515 |     'kusuma',
 516 |     'kwaci',
 517 |     'kwartal',
 518 |     'kwitansi',
 519 |     'laba',
 520 |     'lajim',
 521 |     'lamtorogung',
 522 |     'lapal',
 523 |     'lasykar',
 524 |     'laveransir',
 525 |     'ledeng',
 526 |     'legalisir',
 527 |     'legenda',
 528 |     'lemari',
 529 |     'lembap',
 530 |     'leukimia',
 531 |     'limpha',
 532 |     'linier',
 533 |     'literal',
 534 |     'liver',
 535 |     'lobang',
 536 |     'loby',
 537 |     'lokalisir',
 538 |     'longmarch',
 539 |     'lontang',
 540 |     'losin',
 541 |     'lotere',
 542 |     'luwak',
 543 |     'lux',
 544 |     'mpu',
 545 |     'menyan',
 546 |     'maaf',
 547 |     'mabok',
 548 |     'madukoro',
 549 |     'mafum',
 550 |     'maag',
 551 |     'mahnet',
 552 |     'maghrib',
 553 |     'Mahabarata',
 554 |     'Mahapengasih',
 555 |     'mahardhika',
 556 |     'maesa',
 557 |     'mahfudz',
 558 |     'maisena',
 559 |     'maqam',
 560 |     'makcomblan',
 561 |     'makdum',
 562 |     'marifat',
 563 |     'makro',
 564 |     'maruf',
 565 |     'praktek',
 566 |     'mampet',
 567 |     'manager',
 568 |     'mendem',
 569 |     'mandeg',
 570 |     'mangkok',
 571 |     'mantera',
 572 |     'manuskrif',
 573 |     'marathon',
 574 |     'margarine',
 575 |     'marjinal',
 576 |     'massal',
 577 |     'mesjid',
 578 |     'mas',
 579 |     'mas',
 580 |     'mentari',
 581 |     'matematik',
 582 |     'madzab',
 583 |     'mbalelo',
 584 |     'mebeler',
 585 |     'mass',
 586 |     'melody',
 587 |     'mega',
 588 |     'mega',
 589 |     'menyuci',
 590 |     'menterapka',
 591 |     'menterjema',
 592 |     'mentertawak',
 593 |     'monopause',
 594 |     'menthol',
 595 |     'merk',
 596 |     'meram',
 597 |     'merkurokru',
 598 |     'mess',
 599 |     'mustika',
 600 |     'methanol',
 601 |     'metrei',
 602 |     'metoda',
 603 |     'mie',
 604 |     'miraj',
 605 |     'mikroba',
 606 |     'mikro',
 607 |     'mill',
 608 |     'milyar',
 609 |     'milyader',
 610 |     'milyoner',
 611 |     'miyop',
 612 |     'miopi',
 613 |     'missi',
 614 |     'mithos',
 615 |     'mobilisir',
 616 |     'moderen',
 617 |     'monarkhi',
 618 |     'monotheis',
 619 |     'monotype',
 620 |     'montage',
 621 |     'moril',
 622 |     'mozaik',
 623 |     'moto',
 624 |     'muamalah',
 625 |     'muadzin',
 626 |     'mubaligh',
 627 |     'mubalighoh',
 628 |     'muqadimah',
 629 |     'mujizat',
 630 |     'multi',
 631 |     'mummi',
 632 |     'mucikari',
 633 |     'mursid',
 634 |     'musyafir',
 635 |     'mushala',
 636 |     'musium',
 637 |     'musim',
 638 |     'nadar',
 639 |     'nafas',
 640 |     'nahas',
 641 |     'nahkoda',
 642 |     'nampak',
 643 |     'narkotika',
 644 |     'nasehat',
 645 |     'neko',
 646 |     'nenas',
 647 |     'neo',
 648 |     'netralisir',
 649 |     'netting',
 650 |     'netto',
 651 |     'nina',
 652 |     'nipas',
 653 |     'nomaden',
 654 |     'nomer',
 655 |     'non',
 656 |     'non',
 657 |     'nonsen',
 658 |     'notulen',
 659 |     'okulele',
 660 |     'omset',
 661 |     'ongseng',
 662 |     'oplet',
 663 |     'orange',
 664 |     'organisir',
 665 |     'orisinil',
 666 |     'orkhestra',
 667 |     'osmosis',
 668 |     'otentik',
 669 |     'otopsi',
 670 |     'otto',
 671 |     'pacet',
 672 |     'padepokan',
 673 |     'padri',
 674 |     'palem',
 675 |     'pamfelet',
 676 |     'panca',
 677 |     'panembahan',
 678 |     'pangkreas',
 679 |     'panitra',
 680 |     'paradox',
 681 |     'paragoge',
 682 |     'paramedik',
 683 |     'parasit',
 684 |     'pas',
 685 |     'pasca',
 686 |     'pasport',
 687 |     'patent',
 688 |     'pateri',
 689 |     'patriakat',
 690 |     'patrilinial',
 691 |     'pavilyun',
 692 |     'Pebruari',
 693 |     'pedes',
 694 |     'pelaminan',
 695 |     'peliara',
 696 |     'pendopo',
 697 |     'pengrajin',
 698 |     'perduli',
 699 |     'pernis',
 700 |     'Philipina',
 701 |     'phobi',
 702 |     'photo',
 703 |     'piranti',
 704 |     'pirsawan',
 705 |     'plat',
 706 |     'plesetan',
 707 |     'plesir',
 708 |     'pleton',
 709 |     'plintir',
 710 |     'plonco',
 711 |     'plontos',
 712 |     'polio',
 713 |     'pondasi',
 714 |     'qasidah',
 715 |     'qodariyah',
 716 |     'qodi',
 717 |     'Qodiriyah',
 718 |     'qolam',
 719 |     'qolbu',
 720 |     'Qomariyah',
 721 |     'qomat',
 722 |     'qonaah',
 723 |     'qori',
 724 |     'qoriah',
 725 |     'qunut',
 726 |     'Quran',
 727 |     'Quraisy',
 728 |     'radio',
 729 |     'rakaat',
 730 |     'Ramadhan',
 731 |     'rangking',
 732 |     'ranzel',
 733 |     'rapih',
 734 |     'rapot',
 735 |     'rasia',
 736 |     'rasialist',
 737 |     'rasionil',
 738 |     'realisir',
 739 |     'reamur',
 740 |     'Rebo',
 741 |     'regim',
 742 |     'rejeki',
 743 |     'rekruit',
 744 |     'relif',
 745 |     'renaisance',
 746 |     'reptil',
 747 |     'reservoir',
 748 |     'resiko',
 749 |     'respon',
 750 |     'restauran',
 751 |     'resum',
 752 |     'reumatik',
 753 |     'ridho',
 754 |     'riil',
 755 |     'rilai',
 756 |     'ritme',
 757 |     'rocker',
 758 |     'roh',
 759 |     'rohaniawan',
 760 |     'romo',
 761 |     'romusha',
 762 |     'rong',
 763 |     'ronsen',
 764 |     'route',
 765 |     'rubah',
 766 |     'ruku',
 767 |     'centigram',
 768 |     'centimeter',
 769 |     'sai',
 770 |     'sahadat',
 771 |     'sahid',
 772 |     'sahwat',
 773 |     'saka',
 774 |     'sakharin',
 775 |     'saklar',
 776 |     'salesma',
 777 |     'sambel',
 778 |     'sambrero',
 779 |     'sanawiyah',
 780 |     'sangkalan',
 781 |     'sangsi',
 782 |     'sanjak',
 783 |     'sanksi',
 784 |     'Sansekerta',
 785 |     'saos',
 786 |     'saparila',
 787 |     'saplemen',
 788 |     'sapta',
 789 |     'sariawan',
 790 |     'sate',
 791 |     'satire',
 792 |     'sebab',
 793 |     'sedia',
 794 |     'seign',
 795 |     'sekedar',
 796 |     'sekering',
 797 |     'sekolastik',
 798 |     'sekor',
 799 |     'sekores',
 800 |     'seksama',
 801 |     'seksuil',
 802 |     'sekta',
 803 |     'sekterian',
 804 |     'sekuadron',
 805 |     'sekuler',
 806 |     'selinder',
 807 |     'selulose',
 808 |     'semanda',
 809 |     'sembrono',
 810 |     'semedi',
 811 |     'senggama',
 812 |     'senikdok',
 813 |     'senopati',
 814 |     'sense',
 815 |     'sentausa',
 816 |     'sentimentil',
 817 |     'sentra',
 818 |     'sepakbor',
 819 |     'sepanduk',
 820 |     'sepesial',
 821 |     'sepesies',
 822 |     'sepionase',
 823 |     'sepirtus',
 824 |     'sepon',
 825 |     'seprei',
 826 |     'serba',
 827 |     'seruling',
 828 |     'seruni',
 829 |     'service',
 830 |     'seterika',
 831 |     'setriker',
 832 |     'sex',
 833 |     'seyogyanya',
 834 |     'shaf',
 835 |     'shalat',
 836 |     'shampo',
 837 |     'she',
 838 |     'shogun',
 839 |     'sie',
 840 |     'silahkan',
 841 |     'silaturrahmi',
 842 |     'simple',
 843 |     'sinagog',
 844 |     'sindrome',
 845 |     'sinkope',
 846 |     'sintesa',
 847 |     'sintesis',
 848 |     'sipilis',
 849 |     'sipoa',
 850 |     'sirik',
 851 |     'sirine',
 852 |     'sistim',
 853 |     'siter',
 854 |     'Siwa',
 855 |     'skop',
 856 |     'sky',
 857 |     'slendro',
 858 |     'sleng',
 859 |     'smash',
 860 |     'sobat',
 861 |     'sodakoh',
 862 |     'softball',
 863 |     'sokhib',
 864 |     'solenoid',
 865 |     'sorban',
 866 |     'sosio',
 867 |     'souvenir',
 868 |     'spagheti',
 869 |     'speedboat',
 870 |     'spink',
 871 |     'spirituil',
 872 |     'sprint',
 873 |     'spur',
 874 |     'sreg',
 875 |     'srigala',
 876 |     'stagen',
 877 |     'stand',
 878 |     'standard',
 879 |     'standarisasi',
 880 |     'stansa',
 881 |     'stater',
 882 |     'stereotipe',
 883 |     'sticker',
 884 |     'stip',
 885 |     'stir',
 886 |     'stock',
 887 |     'stress',
 888 |     'strip',
 889 |     'strok',
 890 |     'subsidair',
 891 |     'subtansi',
 892 |     'subtitusi',
 893 |     'subyek',
 894 |     'sudet',
 895 |     'suhada',
 896 |     'suiter',
 897 |     'suka',
 898 |     'sundel',
 899 |     'sunnah',
 900 |     'sup',
 901 |     'superman',
 902 |     'supermasi',
 903 |     'supir',
 904 |     'sur',
 905 |     'surat',
 906 |     'surve',
 907 |     'susastera',
 908 |     'sutra',
 909 |     'swa',
 910 |     'syafaat',
 911 |     'syah',
 912 |     'syahdu',
 913 |     'syaraf',
 914 |     'syareat',
 915 |     'syarekat',
 916 |     'syetan',
 917 |     'syiar',
 918 |     'syrup',
 919 |     'syubat',
 920 |     'syurga',
 921 |     'taala',
 922 |     'tazim',
 923 |     'tabligh',
 924 |     'tahiyat',
 925 |     'tahta',
 926 |     'talek',
 927 |     'tamzil',
 928 |     'tangker',
 929 |     'tape',
 930 |     'tapelak',
 931 |     'tapi',
 932 |     'tarkim',
 933 |     'taruna',
 934 |     'tataniaga',
 935 |     'tatto',
 936 |     'taubat',
 937 |     'tauco',
 938 |     'taulada',
 939 |     'tawakkal',
 940 |     'taxi',
 941 |     'team',
 942 |     'tehnik',
 943 |     'tekat',
 944 |     'teke',
 945 |     'telor',
 946 |     'temenggung',
 947 |     'temu',
 948 |     'tentram',
 949 |     'teoritis',
 950 |     'tepa',
 951 |     'terimakasih',
 952 |     'terlanjur',
 953 |     'terlantar',
 954 |     'terlentang',
 955 |     'terong',
 956 |     'terpedo',
 957 |     'tersina',
 958 |     'test',
 959 |     'thawaf',
 960 |     'theater',
 961 |     'theologi',
 962 |     'thesis',
 963 |     'thoriqoh',
 964 |     'ticket',
 965 |     'timun',
 966 |     'tips',
 967 |     'toa',
 968 |     'toge',
 969 |     'tolerir',
 970 |     'tonel',
 971 |     'top',
 972 |     'topaz',
 973 |     'toples',
 974 |     'tour',
 975 |     'touris',
 976 |     'tournamen',
 977 |     'tradisionil',
 978 |     'trakhom',
 979 |     'trans',
 980 |     'trapo',
 981 |     'trenggiling',
 982 |     'trengginas',
 983 |     'tribun',
 984 |     'trilyun',
 985 |     'trinale',
 986 |     'tripang',
 987 |     'triplek',
 988 |     'tritis',
 989 |     'trofosfir',
 990 |     'tromol',
 991 |     'trophi',
 992 |     'trotoir',
 993 |     'trubus',
 994 |     'truwelu',
 995 |     'tuna',
 996 |     'tungro',
 997 |     'turbo',
 998 |     'tut',
 999 |     'type',
1000 |     'ujian',
1001 |     'ukhrowi',
1002 |     'ultra',
1003 |     'urin',
1004 |     'ustadz',
1005 |     'valentin',
1006 |     'vampire',
1007 |     'vanilli',
1008 |     'varices',
1009 |     'varitas',
1010 |     'vaskuler',
1011 |     'vegetarian',
1012 |     'vermaks',
1013 |     'vignet',
1014 |     'villa',
1015 |     'wudlu',
1016 |     'wujut',
1017 |     'wukup',
1018 |     'yudikatif',
1019 |     'yudisial',
1020 |     'yudo',
1021 |     'yunior',
1022 |     'yurisdiksi',
1023 |     'zahir',
1024 |     'zam',
1025 |     'zig',
1026 |     'zinah',
1027 |     'zona',
1028 |     'zygot'
1029 | ]
1030 | 
1031 | kamus = cekSpasi(kamus);
1032 | kamus = cekHuruf(kamus);
1033 | kamus = shuffle(kamus);


--------------------------------------------------------------------------------
/js/function.js:
--------------------------------------------------------------------------------
  1 | abjad = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
  2 | 
  3 | function shuffle(array) {
  4 |     let temp = [];
  5 |     for (var i = array.length; i > 0; i--) {
  6 |         var j = Math.floor(Math.random() * array.length);
  7 |         temp.push(array[j])
  8 |     }
  9 |     return temp;
 10 | }
 11 | 
 12 | 
 13 | function cekSpasi(array){
 14 |     let kata2 = '';
 15 |     let array2 = [];
 16 |     array.forEach((kata)=>{
 17 |         let sample = kata.split("");
 18 |         let dump = [];
 19 |         sample.forEach(e => {
 20 |             if(e==" "){
 21 |                 index = sample.indexOf(e);
 22 |                 sample.splice(index,sample.length);
 23 |             }
 24 |             else{
 25 |                 dump.push(e);
 26 |             }
 27 |         });
 28 |         kata2 = sample.join("");
 29 |         array2.push(kata2);
 30 |     })
 31 |     return array2;
 32 | }
 33 | 
 34 | 
 35 | function cekSpasikata(kata){
 36 |     dump=kata.split("");
 37 |     for(i=0;i<dump.length;i++){
 38 |         kata = kata.replace(" ", '')
 39 |     }
 40 |     return kata;
 41 | }
 42 | 
 43 | 
 44 | 
 45 | function cekHuruf(array){
 46 |     let kata2 ='';
 47 |     let array2 = [];
 48 |     array.forEach((kata)=>{
 49 |         let sample1 = kata.split("");
 50 |         let dump2 = [];
 51 |         sample1.forEach(e => {
 52 |             if(abjad.includes(e)){
 53 |                 dump2.push(e)
 54 |             }
 55 |             else{
 56 |                 dump2.push("");
 57 |             }
 58 |         });
 59 |         kata2 = dump2.join("");
 60 |         array2.push(kata2)
 61 |     })
 62 |     return array2;
 63 | }
 64 | 
 65 | 
 66 | function cekHurufkata(katas){
 67 |     let kata2 ='';
 68 |     let sample = katas.split("");
 69 |     let dump2 = [];
 70 |     sample.forEach(e => {
 71 |         if(abjad.includes(e)){
 72 |             dump2.push(e)
 73 |         }
 74 |         else{
 75 |             dump2.push("");
 76 |         }
 77 |     });
 78 |     kata2 = dump2.join("");
 79 |     return kata2;
 80 | }
 81 | 
 82 | 
 83 | 
 84 | countTime = 60;
 85 | function countdown(){
 86 |     countTime = 60;
 87 |     document.getElementById('countdown').textContent = countTime;
 88 |     mundur = setInterval(function(){
 89 |         countTime -= 1;
 90 |         if (countTime <= 0 ){
 91 |             countTime = 0;
 92 |             userInput.hidden=true;
 93 |             clearInterval(mundur);
 94 | 
 95 |             let user_id = document.getElementById("user_id").textContent;
 96 | 
 97 |             let highpoin = document.getElementById("high_poin").textContent;
 98 |             if(poin>highpoin){
 99 |                 let highpoin_text = document.getElementById("high_poin");
100 | 
101 |                 let rank = document.getElementById("rank_body");
102 |                 // console.log(rank);
103 |                 
104 |                 $.ajax({
105 |                     url: "ajax/update.php",
106 |                     data:
107 |                         {
108 |                             update: 'true',
109 |                             user_id: user_id,
110 |                             highpoin: poin
111 |                         },
112 |                     dataType: 'json',
113 |                     method:'post',
114 |                     success: function(e){
115 |                         // console.log(e);
116 |                         highpoin_text.textContent = e.high_poin;
117 |                     },
118 |                     error:function(e){
119 |                         console.log(e);
120 |                         console.log(arguments);
121 |                         console.log("ajax1 gagal");
122 |                     }
123 |                 });
124 | 
125 |                 
126 |                 $.ajax({
127 |                     url: "ajax/rank.php",
128 |                     method:'post',
129 |                     data :{
130 |                         limit:'10'
131 |                     },
132 |                     success : (e)=>{
133 |                         rank.innerHTML = e;
134 |                         console.log("ajax2 oke");
135 |                     },
136 |                     error : (e)=>{
137 |                         // console.log(e);
138 |                         console.log("ajax2 gagal");
139 |                     }
140 |                 })
141 |             }
142 |             if(poin<=highpoin){
143 |                 console.log("Poin kecil");
144 |             }
145 |         }
146 |         document.getElementById('countdown').textContent = countTime;
147 |         // lanjut = false;
148 |     },1000)
149 | }
150 | 
151 | 
152 | function setPoin(){
153 |     let huruf = document.getElementById("huruf");
154 |     let benar = document.getElementById("benar");
155 |     let salah = document.getElementById("salah");
156 |     let wpm = document.getElementById("poin");
157 | 
158 |     huruf.textContent=banyakhuruf;
159 |     benar.textContent=poinbenar;
160 |     salah.textContent=poinsalah;
161 |     poin = poinbenar-poinsalah;
162 |     wpm.textContent=poin;
163 | }
164 | 
165 | 
166 | 
167 | 
168 | 
169 | function showNotify(){
170 |     notify = document.getElementById("notify");
171 |     notify.style.right = 0;
172 |     setTimeout(()=>{
173 |         notify.style.right='-500px';
174 |     },1000)
175 | }


--------------------------------------------------------------------------------
/js/login.js:
--------------------------------------------------------------------------------
 1 | let loginbtn = document.getElementById("login");
 2 | let usernameInput = document.getElementById("username");
 3 | let passwordInput = document.getElementById("password");
 4 | 
 5 | loginbtn.addEventListener("click",()=>{
 6 |     loginVerification();
 7 | })
 8 | 
 9 | 
10 | usernameInput.addEventListener("keydown",(e)=>{
11 |     if(e.which == 13){
12 |         loginVerification();
13 |     }
14 | })
15 | 
16 | passwordInput.addEventListener("keydown",(e)=>{
17 |     if(e.which == 13){
18 |         loginVerification();
19 |     }
20 | })
21 | 
22 | 
23 | function loginVerification(){
24 |     let username = usernameInput.value;
25 |     let password = passwordInput.value;
26 |     notify = document.getElementById("notify");
27 |     
28 |     $.ajax({
29 |         url: "ajax/login.php",
30 |         method : "post",
31 |         data:
32 |             {
33 |                 remember : checked,
34 |                 username : username,
35 |                 password : password
36 |             },
37 |         dataType : "json",
38 |         success:(e)=>{
39 |             console.log("AJAX OKE");
40 |             if(e == "berhasil"){
41 |                 window.location = "index.php";
42 |             }
43 |             if(e == "Username kosong"){
44 |                 usernameInput.focus();
45 |             }
46 |             if(e == "Password kosong"){
47 |                 passwordInput.focus();
48 |             }
49 |             notify.textContent = e;
50 |         },
51 |         error:(e)=>{
52 |             console.log(e);
53 |         },
54 |     })
55 |     .done((e)=>{
56 |         showNotify();
57 |     })
58 | }
59 | 
60 | 
61 | function showNotify(){
62 |     notify = document.getElementById("notify");
63 |     notify.style.right = 0;
64 |     setTimeout(()=>{
65 |         notify.style.right='-500px';
66 |     },1000)
67 | }
68 | 
69 | 
70 | 
71 | let showpassword = document.getElementById("showpassword");
72 | let show = false;
73 | showpassword.onclick = ()=>{
74 |     if(show==false){
75 |         passwordInput.type = "text";
76 |         showpassword.src = "img/eye.svg"
77 |         show = true;
78 |     }
79 |     else if(show == true){
80 |         passwordInput.type = "password";
81 |         showpassword.src = "img/eye-fill.svg"
82 |         show = false;
83 |     }
84 | }
85 | 
86 | 
87 | let remember = document.getElementById("remember")
88 | let checked = "false";
89 | remember.onclick = ()=>{
90 |     if(remember.checked == true){
91 |         checked = "true";
92 |     }
93 |     else if(remember.checked == false){
94 |         checked = "false";
95 |     }
96 | }


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
  1 | let indexkata = 0;
  2 | let indexhuruf = 0;
  3 | let basebenar = 0;
  4 | 
  5 | 
  6 | // abjadstr = abjad.join("");
  7 | 
  8 | 
  9 | let banyakhuruf = 0;
 10 | let poinbenar = 0;
 11 | let poinsalah = 0;
 12 | let poin = 0;
 13 | 
 14 | 
 15 | 
 16 | let userInput = document.getElementById('userInput')
 17 | userInput.addEventListener("focus",()=>{
 18 |     let classkata2 = ".kata"+indexkata;
 19 |     document.querySelector(classkata2).style.backgroundColor = '#8D9EFF';
 20 |     
 21 | })
 22 | 
 23 | 
 24 | userInput.addEventListener("keydown",(i)=>{
 25 |     countdown();
 26 | },{once:true})
 27 | 
 28 | 
 29 | document.getElementById("restart").addEventListener("click",(e)=>{
 30 |     resetTeks();
 31 | })
 32 | 
 33 | 
 34 | let jalanLagi;
 35 | function resetTeks(){
 36 |     let samplekata = document.querySelectorAll(".kata");
 37 |     if(typeof(mundur)=='undefined'){
 38 |         return true;
 39 |     }else if(typeof(mundur)!='undefined'){
 40 |         clearInterval(mundur);
 41 |     }
 42 |     
 43 |     shuffle(kamus);
 44 |     for(let i = 0;i<10;i++){
 45 |         samplekata[i].textContent = kamus[indexkamus].toLowerCase();
 46 |         indexkamus++;
 47 |     }
 48 | 
 49 |     samplekata.forEach(subkata => {
 50 |         subkata.style.backgroundColor = 'transparent';
 51 |     });
 52 | 
 53 |     document.querySelector('.timer').style.display='flex';
 54 |     
 55 |     let countTime = 60;
 56 |     document.getElementById('countdown').textContent = countTime;
 57 |     document.getElementById('userInput').value = "";
 58 |     userInput.hidden=false;
 59 | 
 60 |     indexkata=0;
 61 |     indexhuruf=0;
 62 | 
 63 |     banyakhuruf = 0;
 64 |     poinbenar = 0;
 65 |     poinsalah = 0;
 66 |     setPoin();
 67 | 
 68 |     
 69 |     // console.log(jalanLagi);
 70 |     if(jalanLagi==undefined){
 71 |         jalanLagi = true;
 72 |         userInput.addEventListener("keydown",(i)=>{
 73 |             countdown();
 74 |             jalanLagi = undefined;
 75 |         },{once:true})
 76 |     }
 77 | }
 78 | 
 79 | 
 80 | 
 81 | window.addEventListener('load',()=>{
 82 |     let sample = document.querySelectorAll(".kata");
 83 |     // console.log(sample);
 84 |     indexkamus = 0;
 85 |     for(let i = 0;i<10;i++){
 86 |         sample[i].textContent = kamus[indexkamus].toLowerCase();
 87 |         indexkamus++;
 88 |     }
 89 | })
 90 | 
 91 | 
 92 | userInput.addEventListener("keydown",(e)=>{
 93 |     let key = e.key;
 94 |     let inputValue = userInput.value;
 95 |     let result;
 96 |     
 97 |     let sample = document.querySelectorAll(".kata");
 98 | 
 99 |     let classkata = ".kata";
100 |     classkata+=indexkata;
101 |     let kata = sample[indexkata].textContent;
102 | 
103 |     if (e.ctrlKey) //cek CTRL
104 |     {
105 |         e.preventDefault();
106 |     }
107 |     if(e.which==32 || e.which==13) //cek enter dan spasi
108 |     {
109 |         e.preventDefault();
110 | 
111 |         basebenar = poinbenar;
112 | 
113 |         if(inputValue != kata.substring(0,kata.length)){
114 |             document.querySelector(classkata).style.backgroundColor = '#F49D1A';
115 |         }
116 |         if(inputValue== kata.substring(0,kata.length)){
117 |             document.querySelector(classkata).style.backgroundColor = '#4ee74e';
118 |         }
119 |         userInput.value="";
120 |         inputValue = ""
121 |         key="";
122 |         result = inputValue+key;
123 |         
124 | 
125 |         
126 |         if(indexkata>=sample.length-1){
127 |             // ajaxTeks();
128 |             for(let i = 0;i<10;i++){
129 |                 sample[i].textContent = kamus[indexkamus].toLowerCase();
130 |                 sample[i].style.backgroundColor = 'transparent';
131 |                 indexkamus++;
132 |             }
133 |         }
134 |         if (indexkata<=9){
135 |             indexkata++;
136 |         }
137 |         if(indexkata>9){
138 |             indexkata=0;
139 |         }
140 |         
141 |         let classkata3 = ".kata";
142 |         classkata3+=indexkata;
143 |         document.querySelector(classkata3).style.backgroundColor = '#8D9EFF';
144 |         indexhuruf=0;
145 |     }
146 | 
147 |     
148 |     else if(e.which==20) //cek capslock
149 |     {
150 |         e.preventDefault();
151 |         key = ""
152 |         result = inputValue+key;
153 |     }
154 | 
155 | 
156 |     else if (key =='Backspace' || e.which == 8){ //cek backspace
157 |         key="";
158 |         inputValue= inputValue.slice(0,-1); //menghapus 1 huruf dibelakang
159 |         
160 |         indexhuruf-=1;
161 |         poinbenar-=1;
162 |         if(poinbenar<=basebenar){poinbenar=basebenar};
163 |         benar.textContent = poinbenar;
164 | 
165 |         result = inputValue;
166 |         if(inputValue== kata.substring(0,indexhuruf)){
167 |             document.querySelector(classkata).style.backgroundColor = '#4ee74e';
168 |         }else if (inputValue!= kata.substring(0,indexhuruf)){
169 |             document.querySelector(classkata).style.backgroundColor = 'red';
170 |         }
171 |         if(indexhuruf<=0){
172 |             indexhuruf=0
173 |         }
174 |     }
175 |     else if(abjadstr.includes(e.key)){
176 |         result = inputValue+key;
177 |         if(indexhuruf<kata.length){
178 |             indexhuruf+=1;
179 |         }else if (indexhuruf>=kata.length){
180 |             e.preventDefault();
181 |         }
182 |         if (result == kata.substring(0,indexhuruf)){
183 |             poinbenar+=1;
184 |             poinsalah+=0;
185 |             banyakhuruf+=1;
186 |             setPoin();
187 |             document.querySelector(classkata).style.backgroundColor = '#4ee74e';
188 |         }else if(result!=kata.substring(0,indexhuruf)){
189 |             poinbenar+=0;
190 |             poinsalah+=1;
191 |             banyakhuruf+=1;
192 |             setPoin();
193 |             document.querySelector(classkata).style.backgroundColor = 'red';
194 |         }
195 |     }
196 |     else //cek tombol lain
197 |     {
198 |         e.preventDefault()
199 |         key=""
200 |         result = inputValue+key;
201 |     }
202 | })
203 | 
204 | 
205 | window.addEventListener("load",function(){
206 |     userInput.removeAttribute("disabled");
207 |     userInput.placeholder = "Ketik disini...";
208 | })
209 | 
210 | 
211 | 
212 | let profileimg = document.getElementById("profile");
213 | let profilemenu = document.getElementById("profile-menu")
214 | let tampil = true
215 | profileimg.addEventListener("click",()=>{
216 |     if(tampil == true){
217 |         profileimg.style.transform = "rotate(360deg)";
218 |         profilemenu.style.opacity = 1;
219 |         profilemenu.style.display = 'flex';
220 |         tampil = false;
221 |     }else if(tampil == false){
222 |         profileimg.style.transform = "rotate(0deg)";
223 |         profilemenu.style.opacity = 0;
224 |         profilemenu.style.display = 'none';
225 |         tampil = true;
226 |     }
227 | })
228 | 
229 | 
230 | 
231 | 
232 | let logoutbtn = document.getElementById("logoutbtn")
233 | logoutbtn.addEventListener("click",()=>{
234 |     let lanjut = confirm();
235 |     if(lanjut == true){
236 |         window.location = "logout.php";
237 |     }
238 |     else if(lanjut == false){
239 |         // alert("GAGAL");
240 |     }
241 | })
242 | 
243 | 
244 | 
245 | let rank_body = document.getElementById("rank_body");
246 | let showall = document.getElementById("showall");
247 | let search = document.getElementById("search");
248 | 
249 | 
250 | let hilang = "true";
251 | showall.addEventListener("click",()=>{
252 |     if(hilang == 'true'){
253 |         $.ajax({
254 |             url : "ajax/showall.php",
255 |             method : 'post',
256 |             data : {
257 |                 showall : 'true'
258 |             },
259 |             success : (e)=>{
260 |                 showall.textContent = "Show less";
261 |                 rank_body.innerHTML = e;
262 |                 search.value = "";
263 |                 search.focus();
264 |             }
265 |         })
266 |         hilang = "false";
267 |     }
268 |     else if(hilang == "false"){
269 |         $.ajax({
270 |             url : "ajax/showall.php",
271 |             method : 'post',
272 |             data : {
273 |                 limit : 10
274 |             },
275 |             success : (e)=>{
276 |                 showall.textContent = "Show all"
277 |                 rank_body.innerHTML = e;
278 |                 search.value = "";
279 |                 search.focus();
280 |             }
281 |         })
282 |         hilang = "true";
283 |     }
284 | })
285 | 
286 | 
287 | search.onkeydown = (e)=>{
288 |     let keyboard = e.key;
289 |     let keyword = search.value;
290 |     if(abjadstr.includes(e.key)){
291 |         keyword = search.value+keyboard;
292 |     }
293 |     else if (e.which == 8){ //cek backspace
294 |         keyboard="";
295 |         keyword= keyword.slice(0,-1); //menghapus 1 huruf dibelakang
296 |     }
297 |     else{
298 |         keyboard="";
299 |         keyword = search.value+keyboard;
300 |     }
301 |     for (let i = 0; i < keyword.length; i++) {
302 |         keyword = keyword.trim();
303 |     }
304 |     $.ajax({
305 |         url : "ajax/search.php",
306 |         method : 'post',
307 |         data : {
308 |             keyword : keyword
309 |         },
310 |         success : (e)=>{
311 |             rank_body.innerHTML = e;
312 |             showall.textContent = "Show less";
313 |             hilang = "false";
314 |             if(keyword<=0){
315 |                 search.value = "";
316 |                 search.focus();
317 |             }
318 |         }
319 |     })
320 | }


--------------------------------------------------------------------------------
/js/register.js:
--------------------------------------------------------------------------------
  1 | let daftarbtn = document.getElementById("daftar");
  2 | 
  3 | let usernameInput = document.getElementById("username");
  4 | let passwordInput = document.getElementById("password");
  5 | let password2Input = document.getElementById("password2");
  6 | let nicknameInput = document.getElementById("nickname");
  7 | let varss = [usernameInput,passwordInput,password2Input,nicknameInput];
  8 | 
  9 | 
 10 | varss.forEach((el)=>{
 11 |     el.addEventListener("keydown",(e)=>{
 12 |         if(e.which == 13){
 13 |             let i = 0;
 14 |             daftarEvent();
 15 |         }
 16 |     })
 17 | })
 18 | 
 19 | daftarbtn.addEventListener("click",()=>{
 20 |     let i = 0;
 21 |     daftarEvent();
 22 | })
 23 | 
 24 | 
 25 | 
 26 | function daftarEvent(){
 27 |     let usernameInput = document.getElementById("username");
 28 |     let passwordInput = document.getElementById("password");
 29 |     let password2Input = document.getElementById("password2");
 30 |     let nicknameInput = document.getElementById("nickname");
 31 |     let varss = [usernameInput,passwordInput,password2Input,nicknameInput];
 32 | 
 33 |     let username = usernameInput.value;
 34 |     username = cekSpasikata(username);
 35 |     varss[0].value = username;
 36 |     let password = passwordInput.value;
 37 |     password = cekSpasikata(password);
 38 |     varss[1].value = password;
 39 |     let password2 = password2Input.value;
 40 |     password2 = cekSpasikata(password2);
 41 |     varss[2].value = password2;
 42 |     let nick_name = nicknameInput.value;
 43 |     for (let i = 0; i < nick_name.length; i++) {
 44 |         nick_name = nick_name.trim();
 45 |     }
 46 |     varss[3].value = nick_name;
 47 | 
 48 |     let vars2=[username, password, password2,nick_name];
 49 |     
 50 |     
 51 |     lanjut = false;
 52 |     
 53 |     // cekabjad = true;
 54 |     // vars2.forEach((v2)=>{
 55 |     //     sub = v2.split("");
 56 |     //     sub.forEach((su)=>{
 57 |     //         if(cekabjad == true){
 58 |     //             if(abjadstr.includes(su)){
 59 |     //                 cekabjad = true;
 60 |     //                 lanjut = false;
 61 |     //             }
 62 |     //             else if((abjadstr.includes(su))==false){
 63 |     //                 notify.textContent = "Hanya bisa abjad dan underscore";
 64 |     //                 showNotify();
 65 |     //                 varss[i].focus();
 66 |     //                 varss[i].value = "";
 67 |     //                 cekabjad = false;
 68 |     //                 lanjut = true;
 69 |     //             }
 70 |     //             console.log(i);
 71 |     //         }
 72 |     //         if(i<3){
 73 |     //             i++;
 74 |     //         }
 75 |     //         else if(i>=3){
 76 |     //             i = 0;
 77 |     //         }
 78 |     //     })
 79 |     // })
 80 | 
 81 |     
 82 |     if(lanjut == false){
 83 |         if(username.length<=0){
 84 |             varss[0].focus();
 85 |             varss[0].value = "";
 86 |             notify.textContent = "Username kosong";
 87 |             showNotify();
 88 |             lanjut=false;
 89 |         }
 90 |         else if(password.length<=0){
 91 |             varss[1].focus();
 92 |             varss[1].value = "";
 93 |             notify.textContent = "Password kosong";
 94 |             showNotify();
 95 |             lanjut=false;
 96 |         }
 97 |         else if(password2.length<=0){
 98 |             varss[2].focus();
 99 |             varss[2].value = "";
100 |             notify.textContent = "Password kosong";
101 |             showNotify();
102 |             lanjut=false;
103 |         }
104 |         else if(nick_name.length<=0){
105 |             varss[3].focus();
106 |             varss[3].value = "";
107 |             notify.textContent = "Nickname kosong";
108 |             showNotify();
109 |             lanjut=false;
110 |         }
111 |         else if(password != password2){
112 |             lanjut=false;
113 |             notify.textContent = "Password tidak sama";
114 |             showNotify();
115 |         }
116 |         else if(password.length<3){
117 |             lanjut=false;
118 |             notify.textContent = "Password kurang dari 3";
119 |             showNotify();
120 |         }
121 |         else{
122 |             lanjut = true;
123 |         }
124 |         
125 |         if(lanjut == true){
126 |             $.ajax({
127 |                 url: "ajax/register.php",
128 |                 method : "post",
129 |                 dataType : 'json',
130 |                 data : 
131 |                     {
132 |                         username : username,
133 |                         password : password,
134 |                         password2 : password2,
135 |                         nick_name : nick_name,
136 |                         profile_img : profile_img
137 |                     },
138 |                 success : (e)=>{
139 |                     console.log(e);;
140 |                     notify.textContent = e;
141 |                     console.log("AJAX OKE");
142 |                     if(e=="Berhasil"){
143 |                         alert("Register Berhasil")
144 |                         window.location = "index.php";
145 |                     }
146 |                 },
147 |                 error: (e)=>{
148 |                     console.log(e);
149 |                 }
150 |             })
151 |             .done(()=>{
152 |                 showNotify();
153 |             })
154 |         }
155 |     }
156 | 
157 | 
158 | }
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | let profiles = document.getElementsByName("profile");
166 | let previewprofile = document.getElementById("preview-profile");
167 | let profile_img = 1;
168 | 
169 | 
170 | profiles.forEach(p => {
171 |     p.addEventListener("click",()=>{
172 |         imgSrc = "img/pfp/pfp";
173 |         profile_img = p.value;
174 |         imgSrc+=profile_img+".png";
175 |         console.log(imgSrc);
176 |         previewprofile.src = imgSrc;
177 |         imgSrc = "img/pfp/pfp";
178 |     })
179 | });


--------------------------------------------------------------------------------
/login.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // session_start();
 4 | require_once "core/function.php";
 5 | require_once "core/database.php";
 6 | sesiLogin();
 7 | $con = new Database();
 8 | 
 9 | // var_dump($_COOKIE);
10 | 
11 | if(isset($_COOKIE['username'])){
12 |     if($_COOKIE['username']!=""){
13 |         $username = $_COOKIE['username'];
14 |         $password = $_COOKIE['password'];
15 | 
16 |         $query = "SELECT * FROM user WHERE username = '$username'";
17 |         $con->query($query);
18 |         $res = $con->getSingle();
19 |         if($con->rowCount()==1){
20 |             if($password == $res['password']){
21 |                 $_SESSION['usertrainkey'] = $res['username'];
22 |                 $_SESSION['trainkey_id'] = $res['user_id'];
23 |                 header("Location: http://localhost/10%20Projek%202/");
24 |                 // echo json_encode("berhasil");
25 |             }
26 |         }
27 |     }
28 | }
29 | ?>
30 | 
31 | 
32 | <!DOCTYPE html>
33 | <html lang="en">
34 | <head>
35 |     <meta charset="UTF-8">
36 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
37 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
38 |     <title>Login - Trainkey</title>
39 |     <link rel="icon" type="image/x-icon" href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/img/logo.png">
40 |     <link rel="stylesheet" href="css/style.css">
41 |     <link rel="stylesheet" href="css/login.css">
42 | </head>
43 | <body>
44 |     <p class="notify" id="notify">
45 |         Notify
46 |     </p>
47 | 
48 |     <!-- Navbar -->
49 |     <div class="nav">
50 |         <a href="" class="brand">
51 |             <img src="img/logo.png" alt="" width="70px">
52 |             <h1>Train Key</h1>
53 |         </a>
54 |         <div class="sub-nav">
55 |             <a class="nav-list">
56 |                 <p>Help & Support</p>
57 |             </a>
58 |             <a class="nav-list">
59 |                 <p>Documentation</p>
60 |             </a>
61 |         </div>
62 |     </div>
63 |     <!-- End Navbar -->
64 | 
65 | 
66 |     <div class="login-container">
67 |         <div class="card-container">
68 |             <h1>Login</h1>
69 |             <form class="form-container">
70 |                 <div class="form-content username">
71 |                     <label for="username">Username 
72 |                     </label>
73 |                     <input type="text" name="username" id="username" autocomplete="off" required="" autofocus placeholder="Masukkan username">
74 |                 </div>
75 |                 <div class="form-content password">
76 |                     <label for="password">Password 
77 |                     </label>
78 |                     <input type="password" name="password" id="password" autocomplete="off" require="" placeholder="Masukkan password">
79 |                     <img style="color: red;" src="img/eye-fill.svg" id="showpassword">
80 |                 </div>
81 |                 <div class="form-content remember">
82 |                     <input type="checkbox" name="remember" id="remember">
83 |                     <label for="remember">remember me</label>
84 |                 </div>
85 |             </form>
86 |             <legend>
87 |                 <a href="register.php" class="daftar">Tidak punya akun?</a>
88 |                 <a href="forgot_password" class="forgot">Lupa password?</a>
89 |             </legend>
90 |             <button type="button" id="login">Login</button>
91 |         </div>
92 |     </div>
93 | 
94 |     <script src="js/jquery.min.js"></script>
95 |     <script src="js/login.js"></script>
96 | </body>
97 | </html>


--------------------------------------------------------------------------------
/logout.php:
--------------------------------------------------------------------------------
 1 | <?php  
 2 | session_start();
 3 | $_SESSION = [];
 4 | session_unset();
 5 | session_destroy();
 6 | 
 7 | unset($_SESSION);
 8 | 
 9 | // setcookie('username','');
10 | // setcookie('password','');
11 | setcookie('username','',time()-3600,'/');
12 | setcookie('password','',time()-3600,'/');
13 | 
14 | header('Location: login.php')
15 | ?>


--------------------------------------------------------------------------------
/register.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | require_once "core/function.php";
  4 | sesiLogin();
  5 | 
  6 | ?>
  7 | 
  8 | 
  9 | <!-- <form action="" method="post">
 10 |     
 11 | </form> -->
 12 | 
 13 | 
 14 | <!DOCTYPE html>
 15 | <html lang="en">
 16 | <head>
 17 |     <meta charset="UTF-8">
 18 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 19 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 20 |     <title>Register - Trainkey</title>
 21 |     <link rel="icon" type="image/x-icon" href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/img/logo.png">
 22 |     <link rel="stylesheet" href="css/style.css">
 23 |     <link rel="stylesheet" href="css/register.css">
 24 | </head>
 25 | <body>
 26 |     <p class="notify" id="notify">Notify</p>
 27 | 
 28 |     <!-- Navbar -->
 29 |     <div class="nav">
 30 |         <a href="https://pbw.ilkom.unej.ac.id/tia/tia212410102033/pweb/" class="brand">
 31 |             <img src="img/logo.png" alt="" width="70px">
 32 |             <h1>Train Key</h1>
 33 |         </a>
 34 |     </div>
 35 |     <!-- End Navbar -->
 36 | 
 37 | 
 38 |     <div class="login-container">
 39 |         <div class="card-container">
 40 |             <h1>Register</h1>
 41 |             <form class="form-container">
 42 |                 <fieldset class="form-profile">
 43 |                     <legend>Pilih foto profil : </legend>
 44 |                     <label for="profile1">
 45 |                         <input type="radio" name="profile" id="profile1" value="1">
 46 |                         <img class="profile-img" src="img/pfp/pfp1.png">
 47 |                     </label>
 48 |                     <label for="profile2">
 49 |                         <input type="radio" name="profile" id="profile2" value="2">
 50 |                         <img class="profile-img" src="img/pfp/pfp2.png">
 51 |                     </label>
 52 |                     <label for="profile3">
 53 |                         <input type="radio" name="profile" id="profile3" value="3">
 54 |                         <img class="profile-img" src="img/pfp/pfp3.png">
 55 |                     </label>
 56 |                     <label for="profile4">
 57 |                         <input type="radio" name="profile" id="profile4" value="4">
 58 |                         <img class="profile-img" src="img/pfp/pfp4.png">
 59 |                     </label>
 60 |                     <label for="profile5">
 61 |                         <input type="radio" name="profile" id="profile5" value="5">
 62 |                         <img class="profile-img" src="img/pfp/pfp5.png">
 63 |                     </label>
 64 |                     <label for="profile6">
 65 |                         <input type="radio" name="profile" id="profile6" value="6">
 66 |                         <img class="profile-img" src="img/pfp/pfp6.png">
 67 |                     </label>
 68 |                     <label for="profile7">
 69 |                         <input type="radio" name="profile" id="profile7" value="7">
 70 |                         <img class="profile-img" src="img/pfp/pfp7.png">
 71 |                     </label>
 72 |                     <label for="profile8">
 73 |                         <input type="radio" name="profile" id="profile8" value="8">
 74 |                         <img class="profile-img" src="img/pfp/pfp8.png">
 75 |                     </label>
 76 |                     <label for="profile9">
 77 |                         <input type="radio" name="profile" id="profile9" value="9">
 78 |                         <img class="profile-img" src="img/pfp/pfp9.png">
 79 |                     </label>
 80 |                     <label for="profile10">
 81 |                         <input type="radio" name="profile" id="profile10" value="10">
 82 |                         <img class="profile-img" src="img/pfp/pfp10.png">
 83 |                     </label>
 84 |                     <label for="profile11">
 85 |                         <input type="radio" name="profile" id="profile11" value="11">
 86 |                         <img class="profile-img" src="img/pfp/pfp11.png">
 87 |                     </label>
 88 |                     <label for="profile12">
 89 |                         <input type="radio" name="profile" id="profile12" value="12">
 90 |                         <img class="profile-img" src="img/pfp/pfp12.png">
 91 |                     </label>
 92 |                     <label for="profile13">
 93 |                         <input type="radio" name="profile" id="profile13" value="13">
 94 |                         <img class="profile-img" src="img/pfp/pfp13.png">
 95 |                     </label>
 96 |                     <label for="profile14">
 97 |                         <input type="radio" name="profile" id="profile14" value="14">
 98 |                         <img class="profile-img" src="img/pfp/pfp14.png">
 99 |                     </label>
100 |                     <label for="profile15">
101 |                         <input type="radio" name="profile" id="profile15" value="15">
102 |                         <img class="profile-img" src="img/pfp/pfp15.png">
103 |                     </label>
104 |                     <label for="profile16">
105 |                         <input type="radio" name="profile" id="profile16" value="16">
106 |                         <img class="profile-img" src="img/pfp/pfp16.png">
107 |                     </label>
108 |                 </fieldset>
109 |                 <div class="form-content">
110 |                     <img src="img/pfp/pfp1.png" id="preview-profile" width="100px" alt="">
111 |                 </div>
112 |                 <div class="form-content">
113 |                     <label for="username">Username</label>
114 |                     <input type="text" name="username" maxlength="20" id="username" autocomplete="off" required="" autofocus placeholder="Type here...">
115 |                 </div>
116 |                 <div class="form-content">
117 |                     <label for="password">Password</label>
118 |                     <input type="text" name="password" id="password" autocomplete="off" required="" autofocus placeholder="Type here...">
119 |                 </div>
120 |                 <div class="form-content">
121 |                     <label for="password2">Retype password</label>
122 |                     <input type="text" name="password2" id="password2" autocomplete="off" required="" autofocus placeholder="Type here...">
123 |                 </div>
124 |                 <div class="form-content">
125 |                     <label for="nickname">Nickname</label>
126 |                     <input type="text" name="nickname" maxlength="50" id="nickname" autocomplete="off" required="" autofocus placeholder="Type here...">
127 |                 </div>
128 |             </form>
129 |             <button type="button" id="daftar">Daftar</button>
130 |         </div>
131 |     </div>
132 | 
133 |     <script src="js/jquery.min.js"></script>
134 |     <script src="js/function.js"></script>
135 |     <script src="js/data.js"></script>
136 |     <script src="js/register.js"></script>
137 | </body>
138 | </html>


--------------------------------------------------------------------------------