Web Development At Localhost

Web Development At Localhost And Webhosting

SMKN 1 BANGKINANG

JOB SHEET LAPORAN PRAKERIN

Program Keahlian : Teknik Komputer Dan Jaringan
Tanggal
: 22 April 2013
Tempat DU DI
: Politeknik Caltex Riau (PUSKOM)

Nama : DEWA
NIS
: 3239
Judul : Web Development At Localhost & webhosting

A. Teori Dasar
1. Pengertian Joomla
Joomla! adalah Sistem manajemen konten (CMS) yang bebas dan terbuka (free opensource)
ditulis menggunakan PHP dan basisdata MySQL untuk keperluan di internet maupun
intranet. Joomla pertamakali dirilis dengan versi 1.0.0. Fitur-fitur Joomla! diantaranya
adalah sistem caching untuk peningkatan performansi, RSS, blogs, poling, dll. Joomla!
menggunakan lisensi GPL. Asal kata Joomla sendiri berasal dari kata Swahili yang
mengandung arti "kebersamaan".
2. Pengertian Xampp
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan
kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri
(localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan
penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP
merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.
Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server
yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.
3. Pengertian Template
Template adalah pola/layout dari sebuah website yang sudah didesain sedinamis mungkin
dan sudah jadi/tinggal pakai, bisa di edit sedikit lalu upload di website dan tampilan website
akan berubah.
4. Pengertian Upload
Mengunggah/upload adalah proses mengirim data (umumnya berbentuk berkas) dari
komputer pribadi ke suatu sistem seperti server web, server FTP atau sistem serupa
5. Pengertian Widget
Dalam istilah internet merupakan “kode portabel ( biasanya DHTML, JavaScript atau Adobe
Flash ) yang dipasang ( diinstall, atau sederhananya, copy paste ) pada suatu halaman web,
yang memiliki suatu fungsi tertentu dan menjadi suatu bagian dalam halaman web
tersebut.” istilah lain untuk widget : gadget, badge, module, webjit, capsule, snippet, mini,
flake, application, dll.
6. Pengertian Webhosting
Web Hosting adalah salah satu bentuk layanan jasa penyewaan tempat di Internet yang
memungkinkan perorangan ataupun organisasi menampilkan layanan jasa atau produknya
di web / situs Internet. Tempat dapat juga diartikan sebagai tempat penyimpanan data
berupa megabytes (mb) hingga terabytes (tb) yang memiliki koneksi ke internet sehingga

1

data tersebut dapat direquest atau diakses oleh user dari semua tempat secara simultan.
Inilah yang menyebabkan sebuah website dapat diakses bersamaan dalam satu waktu oleh
multi user.
7. Pengertian Database
Data Base / Basis data : kumpulan informasi yang disimpan dalam disk komputer secara
sistematis. Software yang digunakan untuk membuat, mengola, memelihara, memonitor
dan memindah database disebut DBMS (Database Management System). Contoh mysql

B. Tujuan Dan Manfaat
-

Akan Memberikan sebuah pengetahuan baru yang tidak pernah di ajar secara formal di
sekolah yakni tentang webhosting.
Siswa dapat mengenal dan mengetahui apa itu webhosting
Siswa dapat membangun sebuah website sederhana menggunakan joomla
Siswa dapat mempelajari tentang basis data (database) mysql
Siswa dapat mengenal dan mempelajari joomla secara baik dan tepat

C. Keselamatan Kerja
-

Gunakan Software sesuai dengan fungsinya
Perhatikan juga spesifikasi minimum yang di butuhkan oleh software yang kita gunakan

D. Alat Dan Bahan
-

Sebuah PC/Laptop
Software Xampp 1.8.1 www.apachefriends.org/en/xampp-windows.html
Joomla 1.7.3 http://joomla.org/download.html
Template Joomla http://themza.com
Web Browser http://mozilla.org

E. Langkah Kerja Dan Gambaran Kerja
A. Mengubah DNS/Host Localhost Menjadi Domain kita sendiri

-

-

Di sini saya akan memberikan sedikit tips and trick yakni mengubah domain localhost
menjadi domain kita sendiri di sini saya mengubah domain localhost tersebut dengan
domain dewa. Berikut ini cara mengubahnya :
Pertama buka file “C:WINDOWSsystem32driversetchosts” menggunakan notepad atau
aplikasi editor text lainnya di sini saya menggunaka notepad ++

Kemudian sisipkan text di bawah ini tepat di bawah text “127.0.0.1 localhost”


2

127.0.0.1 dewa

-

Notes *)
Text dewa Bisa anda ganti sesuai dengan keinginan anda
Kemudian save file tersebut (ctrl + s)
Kemudian untuk membuktikannya kita masukan domain http://dewa tersebut ke address
sbar browser kita jika di alihkan ke http://dewa/xampp itu artinya proses pembuatan
domain/host kita berhasil

B. Installasi Joomla Secara Offline Di Localhost
-

1. Install Aplikasi xampp untuk membangun web server localhost kita
Pertama unduh terlebih dahulu software xamppnya. Anda bisa mengunduhnya di
http://www.apachefriends.org/en/xampp-windows.html
Setelah software xampp tersebut terunduh lalu double click/jalankan installer xamppnya


3

-

Kemudian pada menu Component centang semua pilihan/option yang di sediakan lalu klik
next

-

Pada langkah seanjutnya klik install

-

Lalu Tunggu hingga proses installasi selesai

-

Setelah installasi selesai maka akan keluar sebuah messagebox seperti gambar di bawah ini


4

-

-

Klik button yes untuk menjalan xampp control panel yang telah terinsatall di computer kita
Pada GUI/Interface xampp klik button start pada apache dan mysql

2. Installasi Joomla
Pertama unduh terlebih dahulu file joomla yang akan kita gunakan untuk membuat web
local kita. Anda bisa mengunduhnya di sini http://joomla.org/downloads.html
Setelah cms joomla tersebut terunduh lalu buka explorer/my computer anda di path
C:xampphtdocs kemudian buatlah sebuah directory baru dengan nama” joomla”
kemudian extract file joomla-173.rar yang baru kita unduh tadi ke folder joomla tersebut

-

Kemudian buka browser anda dan masukan url ini http://localhost/joomla/ ke address bar
browser tersebut

-

Maka Akan muncul page installasi joomla. pada langkah ini kita bisa memilih bahasa yang di
gunakan pada saat installasi di sini saya menggunakan bahasa English


5

-

Lalu akan muncul page pre-checking (Halaman Pengecekan component joomla) klik “next”
jika semua komponen joomla tersebut lengkap atau tidak ada yang rusak.

-

Pada Page License (halaman Persyaratan dan persetujuan) GPL klik “next”

-

Pada Page “Database Configuration” Setting :
Database Type
: Mysql
Hostname
: Localhost #Hostname in your server
Username
: root #username phpmyadmin
Password
: “ ” #kosongkan saja
Database name
: “Dewa” #terserah anda


6

-

Pada Page “FTP Configuration” klik next

-

Kemudian pada page configuration isi form tersebut sesuai keinginan anda :

-

Kemudian pada page Finish klik button “Remove Installastion folder”

-

Setelah Folder “installation” di hapus maka website cms berbasis joomla kita kini sudah bisa
di akses dengan memasukan url ini http://localhost/joomla ke address bar pada browser


7

-

anda dan untuk mengakses admin page(Configuration) bisa di akses dengan url
http://localhost/joomla/administrator/
Berikut ini tampalan awal (home page) joomla default

-

Tampilan Page Admin Configuration login

-

-

-

3. Modifikasi tampilan laman Joomla (Mengganti Template) dan membuat posting baru
Pertama Login terlebih dahulu ke laman admin page sesuai dengan username dan password
yang anda setting pada page configuration di saat melakukan instalasi di
http://localhost/joomla/administration
Setalah anda login dan masuk ke halaman control panel dari joomla “kita akan membuat
category baru untuk artikel yang nantinya akan kita buat” di menu “content – category
manager – add new category“

Lalu isikan title dari category yang anda ingin kan di sini saya mengisi title dengan
“Antivirus”


8

-

Setelah category baru terinstall maka langkah selanjutnya kita akan membuat article baru
dengan cara klik menu “Content – article manager – add new article”

-

Kemudian buat article anda semanarik mungkin sesuai dengan apa yang ingin anda
sampaikan/curahkan di web page anda

*) Notes
Title
Category
Status
Featured
Article text
-

: isi sesuai dengan judul artikel yang ingin anda buat
: pilih category sesuai dengan judul article anda
: Puclised (Artinya artikel akan langsung di publish dan bisa di lihat)
: jika “yes” maka article tersebut akan muncul di laman utama web anda
: isi dari artikel anda

Selanjutya kita akan mengubah tampilan joomla agar menjadi lebih menarik menggunakan
template yang bias di unduh secara gratis di http://themza.com di sini saya menggunakan
template “computer store” yang di lengkapi dengan image slider 450 px menggunakkan
jQuery” dengan cara klik menu : “Extension – Extension manager” lalu browse file .zip dari
template yang tadi sudah kita unduh “kemudian klik upload & install”


9

-

-

setelah template terinstall, buka page template dengan cara klik menu “Extension –
Template Manager” kemudian klik tanda bintang yang ada di table template yang baru saja
kita install

Setelah Tema yang baru saja kita install di gunakan sebagai theme default dari site kita maka
tampilan site kita pun akan berubah sesuai dengan thema yang kita install.


10

C. Installasi Joomla Secara online di webhosting
1. Pertama buatlah sebuah akun di webhosting. Di sini saya menggunakan webhosting
http://idhostinger.com dan menggunakan paket gratis dengan
Space
: 2 GB
Bandwith
: 10 GB
Mail
: 2 Account Mail
Subdomain
: 2 Subdomain
Berikut ini cara pembuatan akun di idhostinger.com
2. Buka situ http://idhostinger.com
3. Kemudian klik button “buat akun”
4. Setelah klik button “order sekarang” di sini saya memilih hosting gratis
5. Kemudian Isikan form sesuai dengan data kita.

6. Lalu klik “buat akun”
7. Kemudian Anda Harus Memverifikasi akun email anda dengan cara buka email anda lalu Klik
Link hash untuk memverifikasi akum email anda. Di sini saya menggunakan email
admin@dewafiles.p.ht

8. stelah itu klik tab "Kontrol Panel" di account idhostinger anda


11

9. kemudian klik button “buat akun baru”
10. setelah itu pilih type akun untuk hosting anda sesuai dengan keinginan anda.. di sini saya
memilih hosting gratis dengan space 2 GB
11. Setalah itu isikan form domain/subdomain sesuai dengan keinginan anda.. di sini saya
menggunakan subdomain http://web-dewa.p.ht dengan sub domain yang free tapi jika anda
ingin menggunakan domain seperti domain “.com .net .co.id dll” anda harus membayar
tagihan terlebih dahulu agar domain anda bias di gunakan biasanya harga domain tersebut
terganting dari hostinger yang kita gunakan dan juga type domain yang kita gunakan.

12. setelah semua form terisi kemudian klik button “buat”
13. lalu tunggu hingga proses pembuatan akun baru anda selesai.
14. Kemudian pada tab “control panel” klik button “beralih” untuk masuk ke akun yang telah
anda buat tadi


12

15. Setelah kita berada di dashboard lalu pilih menu “Penginstall Otomatis”

16. Kemudian Pilih “Joomla”

17. kemudian isikan username dan password untuk login di admin page joomla anda, dan url
path untuk tempat file joomla yang akan di extract. Di sini saya menggunakan url/path
default yakni http://web-dewa.p.ht

18. kemudian tunggu higga proses installasi selesai...
19. finish.. (untuk installasi joomla sudah selesai)

13

D. Membuat Filehosting Menggunakan Dewafiles
1. Pertama Download terlebih dahulu Dewafiles anda bisa mengunduhnya di website
resmi dari Megasoft informer di http://megasoft-id.com atau http://blog.megasoftid.com
Notes *)
Dewafiles Adalah sebuah CMS/Script PHP Sederhana yang berfugsi untuk membangun
sebuah web filehosting (upload dan download file). Dewafiles ini termasuk products
yang cukup di gemari oleh costumer dari Megasoft Informer selain karna license nya
GPL (free), dewafiles ini juga cukup mudah untuk di install dan di gunakan di server
anda.
2. Kemudian setelah dewafiles beserta databasenya terunduh. Buka explorer/My
computer dengan path C:xampphtdocs kemudian buatlah sebuah folder baru dengan
nama “dewafiles” kemudian extract file dewafiles versi 3.zip ke folder tersebut

3. Kemudian buatlah sebuah database baru di phpmyadmin anda dengan nama
“dewafiles” http://dewa/phpmyadmin

4. Kemudian setelah database dewafiles terbuat maka kita masuk ke database tersebut
dengan cara klik database dewafiles yang ada di menu bar sebelah kiri


14

5. Setelah Anda masuk ke database dewafiles lalu klik tab menu “import”

6. Kemudian browse dan upload database yang sudah kita unduh tadi ke database
dewafiles

7. Kemudian Klik “Go”
8. Tunggu hingga proses importing database selesai
9. Setalah itu edit/buka file C:xampphtdocsdewafileskoneksi.php menggunakan
notepad atau text editor lainnya. Di sini saya meggunakan notepad ++


15

10. Kemudian Ganti text $db = “my_sites” dengan text $db = “dewafiles” sesuai dengan
database yang tadi kita buat yakni dewafiles

11. Kemudian Buka Web filehosting kita dengan url http://dewa/dewafiles

12. Kemudian kita setting web filehosting kita dengan cara login ke admin page dari
dewafiles tersebut http://dewa/dewafiles/admin
Notes *)
Username
: Admin
Password
: admin

13. Kemudian setelah login kita ubah settingan untuk username dan password ketika login
ke admin page dengan cara klik menu Admin yang ada di leftside menu sidebar


16

14. Kemudian ubah semua settingan default username dan password sesuai dengan
keinginan anda

15. Dan anda bisa mengkontrol semua akses user dan file yang di upload oleh user. Beikut
ini list kegunaan leftmenu sidebar
Home

Semua informasi dari web filehosting anda dari total pengunjung untuk
hari ini hingg jumlah member yang telah mendaftar di filehosting kita

Users

di menu ini anda dapat mengetahui info user yang terdaftar di
filehosting anda dan di sini anda juga bisa menghapus akun2/user2
tertentu.

Files

di menu ini anda dapat melihat semua file yang telah di upload oleh
member/user lainnya dan anda juga dapat menghapus file2 tersebut.
di menu ini anda dapat menset/mengatur Username dan password
ketika login ke admin page

Admin

Config

:Pengaturan Umum seperti jika ada yang mengunduh file maka user
tersebuat harus login terlebih dahulu atau tidak untuk dapat
mengunduh file2 tersebut

Statistik

di menu ini anda dapat melihat statistic web anda berdasarkan tanggal
dengan type jumlah page hits dan jumlah file di download


17

E. Membuat Web server Sederhana di linux
1. Pertama Donwload terlebih dahulu xampp for linux di
http://www.apachefriends.org/download.php?xampp-linux-1.8.1.tar.gz

2. Lalu setelah xampp terdownload buka terminal dengan cara ctrl + alt + T
3. Kemudian unzip file file “xampp-linux-1.8.1.tar.gz” dengan cara
tar xvfz xampp-linux-1.8.1.tar.gz -C /opt

4. Seteah itu jalankan xamppnya dengan cara
sudo tar xvfz xampp-linux-1.7.4.tar.gz -C /opt

5. Lalu buka browser dan masukan url ini http://localhost/ ke address bar browser

Anda

6. Kemudian untuk menaruh file agar terupload ke localhost. Copy file tersebut ke

system/opt/lampp/htdocs


18

F. Kesimpulan
Berdasarkan Proses Pembuatan Mengubah DNS/Host Localhost Menjadi Domain kita sendiri
Web joomla localhost di windows, Web joomla di Webhosting (online), Pembuatan
Filehosting Sederhana menggunakan Dewafiles, dan Membuat Web server sederhana di
ubuntu. Maka dapat di simpukan bahwa dalam membuat web yang dinamis itu tidaklah sulit,
karna sudah ada beberapa cms open source yang dapat kita gunakan. Dan dalam pembuatan
web ini bisa kita lakukan secara online dan offline. Jadi terserah kita mau menggunakan yang
online atau offline. Tapi kalau menurut saya sih untuk proses pembelajaran awal baiknya
menggunakan yang offline (localhost) saja,s selain koneksi yang cepat dalam mengirim query
dan mengexcute file, di localhost ini juga kita dapat menghemat waktu dan biaya yang kita
gunakan. dan yang harus di perhatikan di sini adalah ketika kita ingin membuat web local/offline
pastikan bahwa apache server, php, phpmyadmin, dan mysql sudah terinstall/terpasang di
computer anda. Tanpa adanya apache server maka host/domain localhost tidak akan dapat di
kunjungi (Server not found).

G. Saran
Saran yang dapat saya sampaikan adalah apabila ingin membuild/membangun sebuah web
gunakanlah cms yang up to date. artian up to date di sini adalah menggunakan versi yang
terbaru dari cms tersebut agar plugin2 yang baru comfitaible dengan versi cms yang kita pakai.
Dan juga gunakanlah xampp yang terbaru karna menurut saya semangkin tinggi versi sebuah
software/cms yang kita gunakan maka dapat di pastikan feature-feature yang di sediakan
software/cms tersebut lebih banyak dan kualitasnya pun pasti lebih baik.dan saya berharap
apa yang saya tuliskan di joobsheet saya ini dapat bermanfaat bagi pembaca joobsheet ini
terutama guru pembimbing saya di SMKN 1 Bangkinang yang telah menugaskan saya untuk
membuat joobsheet ini. Saya menyadari bahwa joobsheet ini masih jauh dari kesempurnaan,
oleh sebab itu saya mohon maaf apabila ada kesalahan dalam penulisan joobsheet yang saya
buat ini. Terimakasih


19

Web Development At Localhost

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Web Development At Localhost

Similaire à Web Development At Localhost (20)

Dernier

Dernier (20)

Web Development At Localhost