-
Notifications
You must be signed in to change notification settings - Fork 0
/
choose_a_camera.php
131 lines (120 loc) · 5.09 KB
/
choose_a_camera.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<style>
#title{
color:#343a40;
}
#camera_name{
color:#343a40;
}
#name{
width:300px;
}
#navbar{
z-index:1;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.content {
padding: 16px;
}
#card{
display: inline-block;
margin:10px;
border-radius: 10px;
}
#card:hover {
border-color:#343a40;
}
#choose{
margin-right:20px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>GSCam</title>
</head>
<body style="background-color: #eee;">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#" id="navbar_title">GSCam</a>
<div class="collapse navbar-collapse navbar-fixed-top" id="navbarText">
<ul class="navbar-nav mr-auto">
</ul>
</div>
</nav>
</div>
<div class="content" id="main">
<div class='div_class' align='center'>
<br/>
<h3 id="title">Add a camera</h3>
<div id="open_load" align="center" class="content">
<form action="camera2.php" method="GET" enctype="multipart/form-data">
<div class="col-sm-10"><input type="text" name="camera_name" placeholder="Camera name" class="form-control" id="name" required></div>
<br/>
<div class="col-sm-10"><input type="text" name="camera_image" placeholder="Camera URL" class="form-control" id="name" required></div>
<br/>
<div><button type="submit" name="submit" class="btn btn-outline-dark">Add</button></div>
</form>
<br/>
</div>
<br/><br/>
<hr>
<?php
$servername = "localhost:3306";
$username = "root";
$password = "root";
$databaseName = "camera";
$conn = new mysqli($servername,$username,$password,$databaseName);
if($conn->connect_error!=""){
$conn = new mysqli($servername, $username, $password);
$sql = "CREATE DATABASE `".$databaseName."`";
mysqli_query($conn, $sql);
$conn = new mysqli($servername, $username, $password,$databaseName);
$sql = "CREATE TABLE `camera` (
id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
camera_name VARCHAR(10000) NOT NULL,
camera_image VARCHAR(10000) NOT NULL)";
mysqli_query($conn, $sql);
}
$sql = "SELECT * FROM `camera`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<div class="card" id="card" style="width: 15rem;" name="card1">';
echo '<br/><h3 id="camera_name">'.$row["camera_name"].'</h3><br/>';
echo '<div class="card-body" name="card2">';
echo '<a href="main.php?id='.$row["id"].'"><button type="submit" name="submit2" class="btn btn-outline-info" name="choose" id="choose">Choose</button></a>';
echo '<a href="delete_camera.php?id='.$row["id"].'"><button type="submit" name="submit2" class="btn btn-outline-danger" name="delete" id="delete">Delete</button></a>';
echo '</div>';
echo '</div>';
}
}
$conn->close();
?>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>