-
Notifications
You must be signed in to change notification settings - Fork 0
/
TODO
181 lines (168 loc) · 18.6 KB
/
TODO
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
Bagian step folder frontend:
@catatan:
Copy kan bagian ini (beserta anaknya), ke folder frontend untuk tracking step di git
1. Buat file TODO di frontend, trs copykan bagian ini.
2. Ke source control (ctrl+shift+G)
3. Bagian frontend, stage change file TODO (tanda plus di samping file TODO)
4. masukkan message yang sesuai, @misal: Membuat file TODO
5. ctrl + Enter untuk commit perubahan
Step 0:
Konfigurasi CodeIgniter:
Database:
✔ Ke folder frontend @done(20-11-25 20:25)
✔ Ubah file env menjadi .env @done(20-11-25 20:25)
✔ Buka file .env @done(20-11-25 20:25)
✔ Ubah @line: '# CI_ENVIRONMENT = production' menjadi: CI_ENVIRONMENT = development @catatan: kita ubah jadi development dulu supaya kalo ada error jadi nampak, kalo production error nya di silent jadi gatau kita nanti. @done(20-11-25 20:25)
✔ Buka xampp dengan Run as Administrator @done(20-11-25 20:25)
✔ Start Apache dan MySQL @done(20-11-25 20:25)
✔ ke browser, lalu ke @url: localhost/phpmyadmin @done(20-11-25 20:25)
✔ Buat database untuk app frontend ini, terserah namanya apa. misal: gdps_frontend @done(20-11-25 20:25)
✔ Kalo udh berhasil buat, ke VSCode lagi, ke file .env yang tadi, rubah bagian # database.default.hostname = localhost ke bawah: @done(20-11-25 20:25)
@perubahan:
# database.default.hostname = localhost , @menjadi: database.default.hostname = localhost
# database.default.database = ci4, @menjadi: database.default.database = @namaDatabaseYangTdDiBuat:misal gdps_frontend
# database.default.username = root @menjadi: database.default.username = @usernamePhpmyAdmin:misal root
# database.default.password = root @menjadi: database.default.password = @password:misal kosong
# database.default.DBDriver = MySQLi @menjadi: database.default.DBDriver = MySQLi
✔ Kalo udh, di checklist apa yang udh km lakukan pake shortcut Alt + D. Kayak gini @screenshot: '../persiapan/screenshot/StageChangeFrontendTODOandENV.PNG @done(20-11-25 20:25)
✔ Kalo udh ke Source Control Sidebar (ctrl + shift + G (kalo pake Ekstensi GitLens mencet G nya 2kali)) @done(20-11-25 20:25)
✔ Di bagian frontend, Stage Change File TODO dan env, lihat @screenshot: '../persiapan/screenshot/ToggleDoneTODO+.PNG' @done(20-11-25 20:25)
✔ Kasih message commit yang sesuai: misal: Step0: Konfigurasi Codeigniter: Database @done(20-11-25 20:25)
✔ ctrl + Enter untuk commit @done(20-11-25 20:25)
BaseURL:
✔ Sekarang ke file app\Config\App.php @done(20-11-25 20:29)
✔ Rubah @line: public $baseURL = 'http://localhost:8080/'; @menjadi: public $baseURL = 'http://frontend.gdps.localhost/'; @catatan: frontend.gdps.localhost adalah ServerName yang kita set saat membuat Virtual Host Apache @done(20-11-25 20:29)
✔ Rubah @line: public $indexPage = 'index.php'; @menjadi: public $indexPage = ''; @done(20-11-25 20:29)
✔ kalo udh, checklist (alt+D) bagian anak BaseURL @done(20-11-25 20:29)
✔ Ke source control sidebar kayak tadi @done(20-11-25 20:29)
✔ bagian frontend, Stage Change TODO dan App.php @done(20-11-25 20:29)
✔ Message commit: Step0: Konfigurasi Codeigniter: BaseURL @done(20-11-25 20:29)
✔ ctrl + Enter untuk commit @done(20-11-25 20:29)
Step 1:
Landing Page:
View:
✔ Copy semua view landing yang ada di folder '../persiapan/snipplets/app/Views/LandingPage/' @done(20-12-02 11:15)
✔ Ke folder frontend/app/Views/LandingPage/ @done(20-12-02 11:15)
✔ Isikan semua view landing disitu. lihat @screenshot: '../persiapan/screenshot/LandingViewAdd.PNG' @done(20-11-26 10:23)
✔ kalo udh checklist bagian langkah View ini @screenshot: '../persiapan/screenshot/ChecklistStep1LandingView.PNG' @done(20-11-26 10:23)
✔ Stage change file yang anda tambahkan tadi bersama file TODO ini, @screenshot: '../persiapan/screenshot/StageChangeLandingViews.PNG' @done(20-11-26 10:23)
✔ kasih message yang relevan (misal: Step1: LandingPage: View) @done(20-11-26 10:20)
✔ commit dengan ctrl + Enter @done(20-11-26 10:20)
Assets(js/css):
✔ View landing kemarin juga menggunakan file js dan css @done(20-11-26 17:06)
✔ Karena folder assets yang kemarin terlalu besar, maka sudah aku compress, coba di download @url: https://drive.google.com/file/d/1nQJ8-3I4CeLYA7tLruf-Trfumiiwl10i/view?usp=sharing @done(20-11-26 17:06)
✔ extract zip di folder public/assets/ (kalo folder assets belum ada, mohon dibuat dulu) @screenshot: '../persiapan/screenshot/AddAssetsFrontend.PNG' @done(20-11-26 17:06)
✔ kalo udh checklist bagian langkah Assets ini @done(20-11-26 17:06)
✔ Stage change file yang anda tambahkan tadi bersama file TODO ini, @screenshot: '../persiapan/screenshot/StageAllChangesAssetsFrontend.PNG' @done(20-11-26 17:41)
✔ kasih message yang relevan (misal: Step1: LandingPage: Assets) @done(20-11-26 17:06)
✔ commit dengan ctrl + Enter @done(20-11-26 17:06)
Controller:
✔ Penjelasan untuk Controller LandingPage, bisa dilihat di video youtube: @url: @done(20-11-27 00:57)
✔ Buat File LandingPage.php di app/Controllers/ @done(20-11-27 00:57)
✔ Template isinya bisa dilihat di @file: '../persiapan/dokumen/codeSnipplets/Controller/LandingPage.php @done(20-11-27 00:57)
✔ Copy isi file tersebut ke file yang tadi dibuat @done(20-11-27 00:57)
✔ Jika sudah melihat penjelasan dan sudah copy isi file, maka: @done(20-11-27 00:57)
✔ Checklist bagian langkah ini @done(20-11-27 00:57)
✔ stage change file yang berubah (di folder frontend tentunya) @done(20-11-27 00:57)
✔ Kasih message, trs commit @done(20-11-27 00:57)
Buat Class Untuk Nampilin View:
@catatan: di penjelasan video sebelumnya, kita tau bahwa function view() bawaan codeIgniter
itu agak kurang rapi kalau diterapin di project gede.
skrg kita akan buat Class kita sendiri untuk nampilin view
✔ Buat folder di app/Libraries dengan nama View @done(20-11-30 21:48)
✔ trs copykan semua file dari '../persiapan/snipplets/app/Libraries/View/ ke folder yang dibuat tadi @done(20-11-30 21:48)
✔ Penjelasan ada file itu juga, jika belum paham isi dari file2 yang di copy tadi, gamasalah, @done(20-11-30 21:48)
✔ Yang penting km paham poin2 pentingnya:, @done(20-11-30 21:48)
@poin2:
1. class TemplateEngine adalah pengganti function view bawaan CodeIgniter
2. Untuk memakai class TemplateEngine ini, file view harus di ubah menjadi class juga, bukan html aja.
3. setelah view dijadiin class, nanti harus extends BaseView
✔ Skrg mari kita demostrasikan cara pemakaian nya. kita ambil contoh view index.php @done(20-11-30 21:48)
✔ Pertama, kita buat class untuk nampung view index.php, namain apa aja terserah class nya, ditempatin di @done(20-11-30 21:48)
✔ folder frontend/app/Views/LandingPage ya. misal nama classnya LandingPageHome @done(20-11-30 21:48)
✔ skrg kita buat classnya @done(20-11-30 21:48)
✔ video penjelasan class View + TemplateEngine @url: @done(20-11-30 21:48)
✔ video penjelasan snippets pembuatan class View @url: @done(20-11-30 21:48)
✔ Setelah menonton video sebelumnya, coba km praktek-an, ubah View lain menjadi class. ATAU, ikuti step "Memisahkan Footer dan Navbar" dulu dibawah, baru buat view class lain. @done(20-11-30 21:48)
✔ Setelah semua tidak ada error, stage change file yang berubah di bagian folder frontend. @done(20-11-30 21:48)
✔ Beri message commit yang sesuai, contohnya: Class View dan TemplateEngine. @done(20-11-30 21:48)
✔ Commit dengan ctrl + Enter @done(20-11-30 21:48)
Memisahkan Footer dan Navbar dari View:
@catatan: kita tahu bahwa view landing page mempunyai footer dan navbar yang sama di tiap
page nya. maka kita coba pisahkan saja dari view utama nya.
✔ buat folder baru di frontend/Views/LandingPage/ untuk menampung Navbar dan Footer, folder tersebut bisa dinamai apa aja, kalau ak sih seringnya tak namain "Partials", yang artinya "Bagian" @done(20-12-02 11:19)
✔ Kalau sudah buat folder, coba buat class View yang extends BaseView (@tips: bisa menggunakan snipplets) untuk menampung Navbar. namain class tsb: Navbar.php @done(20-12-02 11:19)
✔ pastekan html navbar yang sudah ak siapkan di folder '../persiapan/snipplets/app/Views/LandingPage/Partials/navbar.html' ke class Navbar tadi, lalu save. @done(20-12-02 11:19)
✔ Buat class View lain untuk Footer, di folder yang tadi (fronted/app/Views/LandingPage/Partials) @done(20-12-02 11:19)
✔ pastekan html footer yang sudah ak siapkan di folder '../persiapan/snipplets/app/Views/LandingPage/Partials/footer.html' ke class Footer tadi, lalu save. @done(20-12-02 11:19)
✔ buat abstract class untuk menampung Kerakngka View dari landingPage, yang berisi class Navbar, content, sama class Footer . Namain class ini BaseLandingPage.php (buatnya di folder yang tadi, se folder sama Navbar dan Footer) @done(20-12-02 11:19)
@catatan: jadi abstract class ini adalah class setengah jadi, ibaratnya cuma adonan, harus di proses/di extends lagi.
kayak cuma kerangka doang, baru isi Navbar dan Footer, untuk content page nya, nanti diisi di class yang extends class BaseLandingPage ini.
✔ Untuk isi class BaseLandingPage ini, km bisa copy dari folder persiapan/snipplets/app/Views/LandingPage/Partials/BaseLandingPage.php (penjelasan ada disitu juga) @done(20-12-02 11:19)
✔ Setelah membuat class BaseLandingPage, skrg kita coba terapkan di salah satu View class landingpage. misalkan kita pakai class LandingPageHome yang dibuat di langkah "Buat Class Untuk Nampilin View". @done(20-12-02 11:19)
✔ Di class LandingPageHome.php , class tersebut masih meng-extends class BaseView , ganti dengan meng-extends BaseLandingPage, @screenshot: '../persiapan/screenshot/ChangeExtendsToBaseLandingPage.PNG' @done(20-12-02 11:19)
✔ Disitu class LandingPageHome.php masih error karena belum meng-implement / membuat function 'content'. @screenshot: '../persiapan/screenshot/BaseLandingPageExtendsErrorNotYetImplementMethod.PNG' @done(20-12-02 11:19)
@penjelasan: jadi, seperti yang telah disebutkan di class BaseLandingPage, class tersebut merupakan 'abstract class',
atau gampangnya class setengah jadi.
karena 'abstract class' , maka class yang meng-extendsnya (misal: class LandingPageHome) harus melengkapi function yang
belum jadi. disini contohnya mengimplementasikan function content.
jadi kita akan membuat fucntion content() di class LandingPageHome yang nanti berisi html content dari Page Home nya Landingpage.
✔ Untuk mengatasi error tersebut, maka kita harus membuat function yang disarankan error tsb, yaitu fucntion content() @screenshot: '../persiapan/screenshot/FunctionContentContractBaseLandingPage.PNG' @done(20-12-02 11:19)
✔ skrg ketikan: htParse , di dalam function content() tadi dan tekan enter jika ada sugesti , ini akan menambahkan snipplets untuk memparsing html. @screenshot: '../persiapan/screenshot/htParseDiDalamFunctionContent.PNG' @done(20-12-02 11:19)
✔ Nanti hasilnya akan seperti ini: @screenshot: '../persiapan/screenshot/htParseSnipplets.PNG' @done(20-12-02 11:19)
✔ Kalau sudah begitu maka cut content dari function render() , hanya content saja tanpa navbar maupun footer, lihat @video: @done(20-12-02 11:19)
✔ Disitu hanya content home saja tanpa navbar atau footer karena navbar dan footer sudah ada di BaseLandingPage, @done(20-12-02 11:19)
✔ Serta function render LandingPageHome di delete karena sudah di wakilkan di class BaseLandingPage. @ingat: meng-extends class = mencopy function yang ada di class yg di-extends / Base class. @done(20-12-02 11:19)
✔ Skrg baru coba buat view lain menjadi class dengan meng-extends BaseLandingPage. @done(20-12-02 11:20)
✔ Jika sudah ubah view lain, di contoller LandingPage juga di ubah pake TemplateEngine. @screenshot: '../persiapan/screenshot/ControllerLandingPageTemplateEngine.PNG' @done(20-12-02 11:20)
✔ Jika sudah berhasil dan tidak ada error, maka view yang bukan class bisa di delete (index.php, about.php, dll) @done(20-12-02 11:20)
✔ kemudian, stage change file yang berubah di folder frontend, @done(20-12-02 11:20)
✔ Kasih message yang sesuai, seperti: 'Menambahkan Navbar & Footer, serta membuat view class dari BaseLandingPage'. @done(20-12-02 11:20)
✔ commit dengan ctrl + Enter. @done(20-12-02 11:20)
✔ Oiya, class View yang sudah jadi bisa dilihat di folder '../persiapan/snipplets/app/Views/LandingPage' untuk referensi. @done(20-12-02 11:20)
Manual Routing:
@catatan: Seperti yang kukatakan di awal-awal tutorial, jika kita bergantung pada fitur autorouting
milik Codeigniter, kita tidak bisa merapikan/kurang bebas dalam menentukan url apa yang menuju Controller function apa.
Nah di step ini, kita akan mengubah routing function index() (milik controller LandingPage.php) agar bisa
diakses pada url: frontend.gdps.localhost/ (yang tadinya hanya bisa diakses di url: frontend.gdps.localhost/landingpage/index)
✔ Pertama, buka file frontend/app/Config/Routes.php @done(20-12-02 22:15)
✔ lalu cari line yang berisi: $routes->setAutoRoute(true); @done(20-12-02 22:15)
✔ ubah jadi false: $routes->setAutoRoute(false); lihat @screenshot: '../persiapan/screenshot/SetAutoRouteFalse.jpg' @done(20-12-02 22:15)
✔ lalu copy code di file '../persiapan/snipplets/app/Config/Routes.php' @done(20-12-02 22:15)
✔ pastekan ke file '../frontend/app/Config/Routes.php' di bagian bawah line: $routes->get('/', 'Home::index'); @done(20-12-02 22:15)
✔ Lalu comment line: $routes->get('/', 'Home::index'); lihat @screenshot: '../persiapan/screenshot/CommentRoutesGetHome.jpg'; @done(20-12-02 22:15)
✔ Setelah itu, di bagian yg dicopy td, cari kata 'RouteCollection', dan tekan ctrl+spasi, nanti akan ada sugestion, pilih yang RouteCollection. lihat @screenshot: '../persiapan/screenshot/SuggestionRouteCollection.jpg' @done(20-12-02 22:15)
✔ Setelah itu buat file RoutesConstant.php di folder frontend/app/Config/ @done(20-12-02 22:15)
✔ Isi file tersebut bisa di copy di file '../persiapan/snipplets/app/Config/RoutesConstant.php' @done(20-12-02 22:15)
✔ Setelah di pastekan, kita kembali ke file frontend/app/Config/Routes.php @done(20-12-02 22:15)
✔ di bagian routing yang tadi, kita buat alias untuk tiap2 route, alias routing ditempatkan di argumen ke-3 function get() syntaxnya: ['as' => {aliasdisini} ]. lihat @screenshot: '../persiapan/screenshot/RoutesAlias.jpg' @done(20-12-02 22:15)
✔ atau kalo bingung bisa copy dari file '../persiapan/snipplets/app/Config/RoutesWithAlias @done(20-12-02 22:15)
✔ setelah mensetting alias, tinggal kita panggil routingnya di view class: @done(20-12-02 22:15)
✔ Buka file '../frontend/app/Views/LandingPage/Partials/Navbar.php', lalu cari href yang masih menunju ke url: landingpage/{blablabla} . @done(20-12-02 22:15)
✔ caranya kita pake fitur find (ctrl +F), dan ketikan: 'landingpage/' . lihat @screenshot: '../persiapan/screenshot/SearchLandingPageHref.jpg' @done(20-12-02 22:15)
✔ lalu ubah href tsb untuk menggunakan alias yg tadi telah dibuat, dan ga pake base_url() lagi, tp pake route_to() . lihat @screenshot: '../persiapan/screenshot/ChangeToRoutesAlias.jpg' @done(20-12-02 22:15)
@catatan: fungsi route_to() ini nanti akan membuat url sesuai route yang sudah didefinisikan di Routes.php melalui alias (contoh alias: RoutesConstant::LANDINGPAGE_HOME)
@ingat: fungsi route_to() ini hanya untuk digunakan oleh href yang menunju page lain,
untuk url yg menuju assets(misal: gambar, js, dan css) masih menggunakan base_url()
✔ Skrg kita ubah url yang untuk assets agar menggunakan url dari class RoutesConstant juga, tujuannya untuk memudahkan edit url jika url berubah (maksudnya ubahnya di satu tempat aja) @done(20-12-02 22:15)
@catatan:
url asset yang dimaksud adalah ini, @screenshot: '../persiapan/screenshot/ContohURLAssets.jpg' ,
bagian 'assets/landing/' akan diubah untuk mengakses variable RoutesConstant::LANDINGPAGE_ASSETS_RELATIVE_PATH @screenshot: '../persiapan/screenshot/ContohGantiDenganRoutesConstant.jpg'
variable RoutesConstant sebenarnya juga berisi 'assets/landing/' , lalu kenapa di ganti kalau intinya sama saja??
ini berguna jika url/letak folder assets/landing nya berubah, maka kita hanya edit di satu tempat aja, yaitu di variable LANDINGPAGE_ASSETS_RELATIVE_PATH tadi.
✔ Baik, untuk cara mengganti url assets/landing/ tadi, kita pakai fitur sidebar search milik VSCode (ctrl+shift+F) karena url ini berada di beberapa file. @done(20-12-02 22:15)
✔ Setelah sidebar search terbuka, tekan button '>', dan isikan value-value dibawah: @done(20-12-02 22:15)
@value:
search: 'assets/landing/' (pake tanda petiknya ya)
replace: RoutesConstant::LANDINGPAGE_ASSETS_RELATIVE_PATH
files to include: ./frontend
files to exclude: TODO, RoutesConstant.php
untuk lebih jelasnya, lihat @screenshot: '../persiapan/screenshot/SearchAndReplaceURLAssetsLanding.jpg'
@note: kalau udh isi sesuai screenshot diatas, maka tekan button yang ak kasih panah, itu akan mereplace semua string 'assets/landing/' menjadi RoutesConstant::LANDINGPAGE_ASSETS_RELATIVE_PATH
✔ Setelah ikuti langkah diatas, skrg check view class (misal: LandingPageHome.php, LandingPageAbout.php, dll) dan clas BaseLandingPage.php @done(20-12-02 22:14)
✔ Pasti akan ada error di bagian RoutesConstant, tekan ctrl+spasi di akhir kata RoutesConstant, maka akan muncul sugestion, pilih dan tekan enter, maka error akan hilang, @screenshot: '../persiapan/screenshot/RoutesConstantFixInViewClass.jpg' @done(20-12-02 22:14)
✔ lakukan ke semua view class landingpage @done(20-12-02 22:14)
✔ Setelah itu, skrg test akses di browser, apakah ada error atau tidak, nyalakan xampp(Run as administrator) dan buka frontend.gdps.localhost @done(20-12-02 22:14)
✔ Jika tidak ada error, maka stage chage file yang di bagian frontend. @done(20-12-02 22:14)
✔ Kasih message yang sesuai, misal: Ubah ke Manual Routing @done(20-12-02 22:14)
✔ commit dengan ctrl+Enter @done(20-12-02 22:14)