-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpost1.html
More file actions
228 lines (208 loc) · 12.9 KB
/
post1.html
File metadata and controls
228 lines (208 loc) · 12.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="A clean, beautiful and responsive portfolio template for Developers! using only Html, CSS, and JavaScript">
<meta name="author" content="Kiel Tampubolon">
<title>Kiel Tampubolon | Cyber Security</title>
<!-- Icon Webs -->
<!-- <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/1055/1055666.png" /> -->
<link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/3242/3242257.png" />
<link href="./css/header.css" rel="stylesheet" />
<link href="./css/main.css" rel="stylesheet" />
<link href="./css/home.css" rel="stylesheet" />
<link href="./css/about.css" rel="stylesheet" />
<link href="./css/service.css" rel="stylesheet" />
<link href="./css/portfolio.css" rel="stylesheet" />
<link href="./css/testimonials.css" rel="stylesheet" />
<link href="./css/testimonials.css" rel="stylesheet" />
<link href="./css/blog.css" rel="stylesheet" />
<link href="./css/contact.css" rel="stylesheet" />
<link href="./css/footer.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="brand-name">
<a href="/" class="logo">glatinone</a>
</div>
<div class="hamburger">
<i class="fa fa-bars"></i>
</div>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</header>
<section class="home" id="home">
<div class="container">
<div class="row full-screen">
<div class="home-content">
<div class="block">
<h6>Hi, My Name is</h6>
<h1>Yehezkiel Tampubolon</h1>
<!-- <h3>A Cybersecurity Student/Enthusiast</h3> -->
<!-- Atur Padding dan Margin-->
<h3 class="cd-headline clip">
<span class="blc">I'm </span>
<span class="cd-words-wrapper">
<b class="is-visible">Web Developer</b>
<b>Web Designer</b>
<b>Gamer</b>
<b>Student</b>
</span>
</h3>
<div class="cv-btn">
<a href="#" target="_blank">Donwload CV</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="title">
<h1>BUILD WEBSITE AND DATABASE </h1>
<p>RKS324 - Basis Data </p>
</div>
</div>
<div>
<div class="about-content">
<div>
<div class="text">
<h3>Tabel Skema</h3>
<h2>A. Membuat Website Wordpress dengan database Mysql</h2>
<p>1. Membuat database dan website dengan menggunakan 2 buah virtual machine</p>
<img src="images/tugas5/4.png" class="img-fluid mb-lg-3" alt="">
<p>2. Download Wordpress pada link : www.wordpress.org/download/. Lalu ekstrak dan copy file wordpress tadi ke folder C:/xampp/htdocs (tempat database web nanti)</p>
<p>3. Lalu instalasi wordpress melalui browser dengan url : localhost/wordpress</p>
<p>4. Jalankan instalasi seperti biasa dengan pilih Bahasa Inggris dan next</p>
<p>5. Selanjutnya buka tab baru di browser dan ketik url localhost/phpMyAdmin, Pada menu databases kita tambahkan baru dengan tombol Create lalu isi dengan nama Wordpress.</p>
<p>6. Setelah create database kembali lagi ke tab yang tadi, lalu isi form yang
sesuai dengan data yang valid</p>
<p>7. Lalu akan dialihkan ke halaman dashboard, dan sudah mulai bisa
membuat website yang di ingikan.</p>
<p>8. Berikut adalah contoh tampilan yang sudah diganti menggunakan
Template Wordpress tanpa perlu coding</p>
<p>9. Untuk website tersebut sebenarnya masih banyak lagi yang perlu untuk
di perbaharui dan di edit supaya lebih responsive dan menarik.</p>
<h3>B. Membuat Website 3 Wordpress terpisah dengan database Mysql</h3>
<p>1. Siapkan aplikasi vitualbox atau vmware untuk menjalankan os virtual disini saya menggunakan Ubuntu Server, Buat terbagi 2 Mesin VM yaitu Webserver dan Database Server.</p>
<p>2. Setelah selesai install, pertama yang harus dilakukan adalah command <i>apt-get update dan apt-get upgrade</i> pada kedua machine</p>
<p></p>
<p><b> <center> Step Untuk Machine Web Server </center></b></p>
<p>3. Jalankan Command apt-get install apache2, lalu pilih yes dan tunggu. Lalu untuk cek status apakah apache sudah berjalan atau belum dengan ketik command systemctl status apache2, untuk restart service</p>
<p>4. Selanjutnya atur ip static pada vm dengan command sudo nano /etc/netplan/00-installer-config.yaml, disini saya menggunakan Ip 192.168.0.120 untuk webserver</p>
<p>5. Lalu coba akses browser ip yang tadi apabila berhasil maka akan muncul halaman apache2 default page</p>
<p>6. Selanjutnya install sudo apt-get install mysql-client, dan pilih yes lalu tunggu</p>
<p>7. Install juga apt-get install php php-mysql dan tunggu proses instalasi</p>
<p>8. Setelah selesai buat sebuah file testing disini saya membuat file info.php kedalam folder /var/www/html dan ketik beberapa baris command line</p>
<p>9. Jika sudah selanjut nya buka di browser ip webserver tadi seperti dibawah, Apabila berhasil maka akan menampilkan php yang digunakan</p>
<p><b> <center> Step Untuk Database Server </center></b></p>
<p>10. Setelah update dan upgrade, kita atur ip static sama seperti webserver tadi, disini saya menggunakan ip statis 192.168.0.175</p>
<p>11. Lalu install aplikasi yang akan dijalankan nanti, pertama sudo apt-get install mysql-server</p>
<p>12. Lalu kita masuk kepada konfigurasi mysql nya agar bisa di akses</p>
<p>13. Ketik command sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf</p>
<p>14. Yang diganti pada config disini adalah pada bagian bind-address dari 127.0.0.1 menjadi IP SERVER DATABASE 192.168.0.175</p>
<p>15. Setelah diganti selanjutnya kita restart dengan command sudo systemctl restart mysql</p>
<p>16. Langkah selanjutnya membuat user baru untuk dapat mengakses database lewat webserver seperti command dibawah ini</p>
<p>17. Selanjutnya Kembali konfigurasi webserver login mysql dengan command mysql -u glatinone -h 192.168.0.175 -p</p>
<p>18. Lalu cek informasi database yang telah dibuat pada mysql dengan command \s</p>
<p>19. Selanjutnya kita membuat database wordpress pada database server. Masuk ke sql lagi dengan command mysql -u root -p</p>
<p>20. Lalu ikuti command seperti dibawah ini :</p>
<p>21. Setelah ok semua ketik exit untuk keluar dari mysql</p>
<p>22. Download dan ekstrak terlebih dahulu file wordpress nya seperti ibawah ini, yaitu befungsi untuk mendownload wp dari website resmi nya</p>
<p>23. Selanjutnya kita buka browser dan ketikkan alamat ip webserver slash /wordpress</p>
<p>24. Continue, dan isi data sesuai dengan mysql yang di input tadi</p>
<p>25. Lalu submit dan isi data yang di minta maka penginstallan wordpress sudah berhasil dilakukan. Langkah selanjutnya yang dilakukan adalah ganti tema dengan template yang tersedia gratis.</p>
<p>26. Berikut adalah file config jika di lihat dari cli webserver, wp-config.php</p>
<p>27. Selanjutnya membuat website ke 2 dan ke 3 hampir mirip caranya, hanya mulai dari install databasewordpress dan cms nya saja.. untuk webserver dan database server yang digunakan tetap sama, hanya saja dibedakan penamaan nya</p>
<h4>C. Fungsi dari Union, Select, Wait dan - - </h4>>
<p>1. Fungsi UNION pada SQL digunakan untuk menggabungkan dua tabel dalam bentuk baris baru ke bawah dimana field yang di-SELECT antara tabel satu dan lainnya adalah harus sama.</p>
<p>2. Fungsi dari SELECT, Perintah ini digunakan untuk menampilkan, mengambil maupun memilah informasi dari database atau data dari satu tabel serta beberapa tabel dalam relasi.</p>
<p>3. Fungsi dari WAIT/SLEEP , yaitu untuk memberi jeda waktu sesuai detik yang di input untuk memperlambat waktu pengiriman data kembali, seperti contoh dibawah</p>
<p>4. Fungsi dari - -, adalah untuk memberi comment pada command sql tadi</p>
<p></p>
<p><center> Demikian Laporan Praktikum saya apabila ada kesalahan mohon dimaafkan, Sekian Dan Terimakasih</center></p>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<section class="contact" id="contact">
<div class="container">
<div class="row">
<div class="title text-center">
<h1>Get In Touch</h1>
</div>
</div>
<div class="row">
<div class="contact-form">
<div class="row">
<div class="contact-text">
<h2>Drop Me message</h2>
<p>My inbox is always open I'll try my best to get back to you!</p>
</div>
</div>
<div class="row space-between">
<div class="col-6">
<input type="text" class="form-control" name="" placeholder="Name" />
</div>
<div class="col-6">
<input type="text" class="form-control" name="" placeholder="Email" />
</div>
</div>
<div class="row">
<div class="col-12">
<textarea class="form-control" placeholder="Your Message"></textarea>
</div>
</div>
<div class="row">
<div class="button btn">
<a href="#">Get In Touch</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="footer-logo">glatinone</div>
<div class="social-link">
<a href=""><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/kiel.at" target="_blank"><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href="https://www.linkedin.com/in/kiel-tampubolon/" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href=""><i class="fa fa-github"></i></a>
</div>
</div>
</div>
</footer>
<section class="copyright">
<div class="container">
<p>© <span id="year"></span> | Designed and Developed By Kiel Tampubolon. | All rights reserved.</p>
</div>
</section>
<div class="lightbox hide">
<span class="close-lightbox fa fa-close"></span>
<img src="" alt="portfolio"/>
</div>
<script src="./js/app.js"></script>
</body>
</html>