កម្មវិធីគេហទំព័រជួលកង់ "RENTAL BICYCLE" នឹងជាកម្មវិធីគេហទំព័រជាភាសា Python ដោយប្រើប្រាស់កញ្ចប់ Bottle មួយ ដែលត្រូវបានដកស្រង់ចេញពីលំហាត់អនុវត្តន៍ សំរាប់និស្សិតរៀននៅ Computer Academy STEP Cambodia ជាមួយខ្ញុំបាទផ្ទាល់។
ជាក់ស្តែង កម្មវិធីនេះនឹងបង្កើតមូលដ្ឋានទិន្នន័យមួយនៅលើ server សំរាប់រក្សាទុកនូវទិន្នន័យស្តីពីកង់គ្រប់ប្រភេទ ដែលត្រូវដាក់អោយភ្ញៀវទេសចរណ៍ជួលយកទៅជិះកំសាន្តនៅតាមតំបន់ទេសចរណ៍នានា ក្នុងតំលៃមួយយ៉ាងសមរម្យ។ ជារួម កម្មវិធីជួលកង់ជិះនេះនឹងជាកម្មវិធីមូលដ្ឋានទិន្នន័យដ៏ពេញលក្ខណៈមួយ ដែលនឹងមានមុខងារសំខាន់ៗទាំង ៤ របស់បណ្តាកម្មវិធីមូលដ្ឋានទិន្នន័យទាំងឡាយ ពោលគឺមុខងារ create, read, update, និង delete ដែលគេអាចហៅកាត់យ៉ាងខ្លីថា CRUD Application ។
ជំហានដំបូងក្នុងការរៀបរៀងកម្មវិធីជួលកង់នេះ យើងចាំបាច់ត្រូវបង្កើតឯកសារ static ដែលជាឯកសារ css ឯកសារ JavaScript និងឯកសារ tpl សំរាប់ទំព័រមុខមួយ ដោយធ្វើដូចខាងក្រោមនេះ៖
#c:\bottle\app.py
from bottle import route, run, static_file
from controllers import index
@route('/')
def main():
kargs = {"title":"RENTAL BICYCLE"}
return index.render(**kargs)
@route('/static/scripts/<filename>')
def server_static(filename):
return static_file(filename, root='./public/scripts')
@route('/static/styles/<filename>')
def server_static(filename):
return static_file(filename, root='./public/styles')
@route('/static/images/<filename>')
def server_static(filename):
return static_file(filename, root='./public/images')
@route('/static/fonts/<filename>')
def server_static(filename):
return static_file(filename, root='./public/fonts')
run(host='localhost', port=9000, debug=True, reloader=True)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{data['title']}}</title>
</head>
<body>
{{data['title']}}
</body>
</html>
//c:\bottle\public\scripts\main.js
class Bicycle{
constructor(){
}
}//End of class
bicycle = new Bicycle()
/*c:\bottle\public\styles\main.css*/
#site{
width:700px;
background:lightgrey;
margin:30px auto;
padding:20px;
}
#site-title{
letter-spacing: 2px;
}
#menu{
background:black;
margin:20px 0;
}
#menu a{
padding:10px;
text-decoration:none;
color:white;
display:inline-block;
}
#menu a:hover{
color:grey;
cursor:pointer;
}
