README.md 6.88 KB
Newer Older
1
# A-Chong-co Chocolate Factory Website
2

3
Simple Stock Management Website made using pure PHP, HTML, CSS, and JS. Here are the key features:
4

5
- Login and Register account,
6 7
- User can buy chocolate,
- Superuser/Admin can create new chocolate and restock chocolate,
8 9 10 11
- Some functions updated using AJAX,
- Data are saved on MySQL databases,
- no framework library used, but I made my own, worked around MVC concept

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
12 13 14 15 16 17 18 19 20 21 22
Update Oct 19, 2020:

- deployed on [http://jonathan.elseproperty.com/](http://jonathan.elseproperty.com/)

Update Nov 17, 2020:

- Integrated with factory website.
- Add stock only sends deliver request to factory (wait factory approval).
- Add new chocolate need to submit recipe (ingredient list).

Use branch `webonly` to use older version.
23

24
## Requirements
25

26 27
1. PHP (tested on 5.6+)
1. Mysql (tested on 5.5.8)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
28
1. Python 3 (tested on 3.6+) - for populating sample image
29 30 31
1. Your favorite browser

## Setting Up
32

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
33
1. Install Requirements (I used [XAMPP](https://www.apachefriends.org/download.html) to install all requirements)
34 35
1. Clean (delete all files) inside PHP root document folder (i.e: `htdocs` on XAMPP)
1. Clone repo inside PHP root document folder (i.e: `htdocs` on XAMPP)
36 37
1. Open folder `application/config`
1. Duplicate `config.example.ini`, rename to `config.ini`
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
38 39 40
1. Adjust `config.ini` if needed
1. Run PHP and MySQL (more info see next section)
1. Restore database schema (more info see next section)
41
1. Restore chocolate images (more info see next section)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
42 43 44 45 46

## Running

1. Run PHP and MySQL (again, I used [XAMPP](https://www.apachefriends.org/download.html))
   - If using XAMPP: press `Start` on Apache(PHP) and MySQL
47
2. Open localhost:\$PORT on browser (default url is [http://localhost:80/](http://localhost:80/))
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
48

49
## Restoring Database
50

51
1. Open mysql on repo's root folder
52

53 54 55
```
mysql -u root -p
```
56

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
57 58 59
2. Enter mysql password (default is empty)

3. Create new database
60

61 62 63
```
CREATE DATABASE chocofac;
```
64

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
65 66 67 68 69 70 71
4. Use database

```
USE chocofac;
```

4. Execute queries
72

73 74 75
```
source chocofac20201009.sql
```
76

77
This will create:
78

79 80 81
- 200 users + 1 superuser
- 100 chocolates
- 2211 transactions
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
82

83
## Restoring Chocolate Images
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
84 85 86 87 88 89 90

sample images is not all saved on repo, you can populate them by running this script:

```
python populate_uploads.py
```

91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
## Project Structure

```
htdocs
├───application
│   ├───config
│   ├───controllers
│   ├───models
│   └───views
├───framework
│   ├───core
│   └───database
├───mockup
├───public
│   ├───css
│   ├───html
│   │   ├───chocolate
│   │   ├───error
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
109 110
│   │   ├───home
│   │   ├───templates
111 112 113 114
│   │   └───user
│   ├───images
│   ├───js
│   └───uploads
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
115
├───screenshot
116 117 118 119 120 121 122 123 124
└───wwwroot
```

- application: contains MVC(models, views, controllers) and config folder
- framework: custom framework, based on MVC
- public/html: divided as per model
- public/images: sample images
- public/uploads: uploaded images goes here
- wwwroot: first redirect, sanitize url, runs framework
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
125

126
## Main Features
127

128
### Register
129

130 131 132
> To register a new account

![](screenshot/register1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
133

134
Valid example
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
135

136
![](screenshot/register2-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
137

138
Invalid example
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
139

140
![](screenshot/register3-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
141

142
Not unique example (username-email pair already taken)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
143

144
### Login
145

146 147 148
> Must login before entering website

![](screenshot/login1-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
149

Jonathan Yudi Gunawan's avatar
update  
Jonathan Yudi Gunawan committed
150 151 152 153 154 155 156 157 158 159 160 161
### Dashboard

> Showing top 10 chocolates by amount sold

![](screenshot/dashboard_u1-min.jpg)

as viewed by normal user (difference on navbar)

![](screenshot/dashboard_su1-min.jpg)

as viewed by super user (difference on navbar)

162
### Search by name
163

164 165 166
> using search bar on top

![](screenshot/search1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
167

168
with pagination:
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
169

170
![](screenshot/search_pagination1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
171

172
![](screenshot/search_pagination2-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
173

174
### Chocolate Detail
175

176 177 178
> Click on a chocolate card to see detail

![](screenshot/detail_u1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
179 180 181

viewed as normal user (user can buy)

182
![](screenshot/detail_su1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
183 184

viewed as super user (user can add stock)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
185

186
### Buy Chocolate
187

188 189 190
> Click `Buy Now` on Chocolate Detail page (as normal user)

![](screenshot/buy1-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
191

192
> Click `Buy` to buy, or `Cancel` to cancel
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
193

194
![](screenshot/buy2-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
195

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
196 197
prompt after succesful transaction

198
### Add Chocolate Stock
199

200
> Click `Add Stock` on Chocolate Detail page (as superuser)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
201

202
![](screenshot/add_stock1-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
203

204 205 206
> Click `Add` to add stock, or `Cancel` to cancel

![](screenshot/add_stock2-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
207

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
208 209
prompt after succesful add stock

210
### Transaction History
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
211

212 213 214
> Click `History` on navigation bar (on top of the page) (as user)

![](screenshot/history1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
215

216
![](screenshot/history_pagination1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
217

218
with pagination
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
219

220
### Add New Chocolate
221

222 223 224
> Click `Add New Choco` on navigation bar (on top of the page) (as superuser)

![](screenshot/add_new_choco1-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
225

226
> Click `Add` to add new chocolate, or `Cancel` to cancel
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
227

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
228 229
![](screenshot/detail_su1-min.jpg)

230
will redirect to that chocolate details page after succesful adding new choco
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
231

232
## Bonus Features
233

234
### Cookie Access Token
235

236
> Cookie is not plain username-password pair anymore
237

238
![](screenshot/cookie1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
239

240
using SHA-1 of salted username+password+secret
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
241

242
### Real Time Stock
243

244
> will check again on database, not only on frontend
245

246
![](screenshot/realtime1-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
247

248
before
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
249

250
![](screenshot/realtime2-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
251

252
after
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
253

254
### Responsive Layout
255

256 257 258
> utilising CSS Grid, mimicking Bootstrap Grid Layout (`row` class)

already shown above
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
259

260
### Successful Add/Buy Feedback
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
261

262 263 264
> So the user know if it is successful

![](screenshot/buy2-min.jpg)
Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
265

266
![](screenshot/add_stock2-min.jpg)
Eka Novendra Wahyunadi's avatar
Eka Novendra Wahyunadi committed
267 268 269

## Pembagian Tugas

270
### Front End
271

272 273 274 275 276 277 278 279 280 281 282 283
1. Login: 13518084
1. Register: 13518084
1. Dashboard: 13518084
1. Search Result: 13518084
1. Chocolate Detail: 13518084
1. Buy Chocolate: 13518084
1. Add Stock Chocolate: 13518084
1. Transaction History: 13518084
1. Add New Chocolate: 13518084
1. Bonus: 13518084

### Back End
284

285 286 287 288 289 290 291 292 293 294 295 296
1. Login: 13518084
1. Register: 13518084
1. Dashboard: 13518084
1. Search Result: 13518084
1. Chocolate Detail: 13518084
1. Buy Chocolate: 13518084
1. Add Stock Chocolate: 13518084
1. Transaction History: 13518084
1. Add New Chocolate: 13518084
1. Bonus: 13518084

### References
297

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
298
Basic PHP Knowledge
299

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
300 301
- XAMPP: https://www.javatpoint.com/xampp
- MySQL: https://www.tutorialspoint.com/mysql/index.htm
302 303

Creating Custom Framework
304

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
305 306
- MVC: https://www.codeproject.com/Articles/1080626/Code-Your-Own-PHP-MVC-Framework-in-Hour
- Templating: https://softwareengineering.stackexchange.com/questions/159529/how-to-structure-template-system-using-plain-php
307

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
308
Other PHP Knowledge
309

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
310 311
- Pagination: https://www.malasngoding.com/membuat-paging-dengan-php-dan-mysql/
- AJAX: https://www.w3schools.com/php/php_ajax_php.asp
312

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
313
Frontend Design
314

Jonathan Yudi Gunawan's avatar
Jonathan Yudi Gunawan committed
315 316
- Responsive Table: https://codepen.io/andornagy/pen/EVXpbR
- CSS Grid: https://speckyboy.com/replicate-bootstrap-grid-using-css-grid/
317

318
## Author
319

320 321 322
Jonathan Yudi Gunawan - 13518084

## Ideas
323

324
- superuser notified when stock empty