Front-end
,JavaScript
JavaScript - jQuery
This is a clone of the AirBnB website. This specific part covers web dynamic content development w/ JavaScript
and JQuery
. We load objects from the client side by using a RESTful API developed in previous series: AirBnB_clone_v3. The goal is to gain proficiency in DOM
manipulation, event handling, making AJAX requests/calls, and utilizing the power of jQuery to simplify front-end programming.
Note
- The
index.html
- i.e. HTML files in web_dynamic/templates - serve as the main entry point for the application. This files are rendered by the Flask routes to interact with the JavaScript functionality.- You can find the jQuery library included in the
head
section of eachHTML
file, which enables you to use jQuery methods and selectors in your JavaScript code.- Chrome DevTools:
You can inspect and debug your web pages and see real-time changes in the DOM using it:
PressCtrl+Shift+I
/orfn + f12
(orCmd+Option+I
on macOS) to open DevTools.
- Semistandard compliant :
semistandard *.js --global $
File solutions in web_dynamic/static/scripts/ use this standard.
Specifications
:
- AirBnB_clone - a command interpreter to manipulate data without a visual interface, like in a Shell (perfect for development and debugging)
- AirBnB_clone_v4 (this focus) - a website (the front-end) that shows the final product to everybody: static and dynamic - load objects from the client side by using from RESTful API
- AirBnB_clone_v2 - a database or files that store data (data = objects)
- AirBnB_clone_v3 - an API that provides a communication interface between the front-end and your data (retrieve, create, delete, update them):
- expose all your objects stored via a JSON web interface
- manipulate your objects via a RESTful API
Repository Contents Info:
This section is all file information.
.
├── AUTHORS - Docker specified formatted file for contributors
├── README.md - project documentation.
├── console.py - single-use command interpreter(uses Python `cmd` module).
├── models/ - the main driver of the project; lays out Python Object Orientation, initialization, serialization, (de)serialization etc.
│ ├── __init__.py - effectively make a `Python` Package out of these modules, unique FileStorage instance for app
│ ├── base_model.py - includes base (class) model ; for subclassing/inheritance - is the superclass.
│ ├── user.py - sample file with subclass of BaseModel(from module base_model)
│ ├── engine/ - abstracted storage engine/system for persisting data.
│ │ ├── __init__.py - effectively make a `Python` Package out of these modules
│ │ └── file_storage.py - module with methodes meant to interact with file storage(read from/write to JSON file), and models
└── tests/ - directory for unit testing, test cases/test suites etc.
├── __init__.py - effectively make a `Python` Package out of these modules, for Python test discovery.
└── test_models/ - files that test models eg test_base_model.py, test_user.py, test_review.py
└── __init__.py - effectively make a `Python` Package out of these modules, for Python test discovery.
...
├── web_dynamic - JavaScript jQuary, Flask Routing etc - focus of AirBnB v4
│ ├── *-hbnb.py - Routing file
│ ├── 100-dump.sql - file for database Dump to get mock data for user-facing of MVC
│ ├── static
│ │ ├── images
│ │ │ ├── icon.png
│ │ ├── scripts
│ │ │ └── *-hbnb.js - JQuery for DOM manipulation
│ │ └── styles - CSS
│ ├── templates - Jinja Templates
│ │ └── *-hbnb.html
│ └── w3c_validator.py
...
├── web_flask
│ ├── *.py - Flask routing files
│ ├── README.md
│ ├── __init__.py
│ ├── static
│ │ ├── images
│ │ │ └── logos/icons
│ │ └── styles - Cascading Style Sheets
│ │ └── *.css
│ └── templates - Jinja templating
│ └── *.html
└── web_static
└── Frontend of the application directory hosting static files: CSS, HTML, Images.
- Create MySQL User and Database; dump mock db data;
$ cat setup_mysql_dev.sql | sudo mysql # -uroot -p # if root user uses passwd
$ cat web_dynamic/100-dump.sql | sudo mysql # -uroot -p # if root user uses passwd
- Run Flask app on port
5000
and5001
:
# terminal 1:
$ HBNB_MYSQL_USER=hbnb_dev HBNB_MYSQL_PWD=hbnb_dev_pwd HBNB_MYSQL_HOST=localhost HBNB_MYSQL_DB=hbnb_dev_db HBNB_TYPE_STORAGE=db python3 -m web_dynamic.*-hbnb
# where *-hbnb is any of the Flask routing files
# terminal 2:
$ HBNB_MYSQL_USER=hbnb_dev HBNB_MYSQL_PWD=hbnb_dev_pwd HBNB_MYSQL_HOST=localhost HBNB_MYSQL_DB=hbnb_dev_db HBNB_TYPE_STORAGE=db HBNB_API_PORT=5001 python3 -m api.v1.app
command-line interface
a shell implementation that uses thePython
modulecmd
, which provides a simple framework for writing line-oriented command interpreters.
Is a CRUD
simulated behavior - operations on objects in command-line.
Note:
start interpreter in interactive mode:./console.py
;- quit interpreter: typequit
orEOF
, or pressCtrl + D
sample interpreter features:create
,show
,update
,destroy
, etc
# run the interpreter in interactive mode:
/AirBnB_clone$ ./console.py
# prompt designates you are in the "HBnB" console
(hbnb)
There are a variety of commands available within the console program.
* create - Creates an instance based on given class
* destroy - Destroys an object based on class and UUID
* show - Shows an object based on class and UUID
* all - Shows all objects the program has access to, or all objects of a given class
* update - Updates existing attributes an object based on class name and UUID
* quit - Exits the program (EOF will as well)
Users are able to issue a number of console command using an alternative syntax:
`Syntax`: <class_name>.<command>([<id>[name_arg value_arg]|[kwargs]])
Advanced syntax is implemented for the following commands:
* all - Shows all objects the program has access to, or all objects of a given class
* count - Return number of object instances by class
* show - Shows an object based on class and UUID
* destroy - Destroys an object based on class and UUID
* update - Updates existing attributes an object based on class name and UUID
Usage: create <class_name>
(hbnb) create BaseModel
(hbnb) create BaseModel
3aa5babc-efb6-4041-bfe9-3cc9727588f8
(hbnb)
Usage: show <class_name> <_id>
(hbnb) show BaseModel 3aa5babc-efb6-4041-bfe9-3cc9727588f8
[BaseModel] (3aa5babc-efb6-4041-bfe9-3cc9727588f8) {'id': '3aa5babc-efb6-4041-bfe9-3cc9727588f8', 'created_at': datetime.datetime(2020, 2, 18, 14, 21, 12, 96959),
'updated_at': datetime.datetime(2020, 2, 18, 14, 21, 12, 96971)}
(hbnb)
Usage: destroy <class_name> <_id>
(hbnb) destroy BaseModel 3aa5babc-efb6-4041-bfe9-3cc9727588f8
(hbnb) show BaseModel 3aa5babc-efb6-4041-bfe9-3cc9727588f8
** no instance found **
(hbnb)
Usage: update <class_name> <_id>
(hbnb) update BaseModel b405fc64-9724-498f-b405-e4071c3d857f first_name "person"
(hbnb) show BaseModel b405fc64-9724-498f-b405-e4071c3d857f
[BaseModel] (b405fc64-9724-498f-b405-e4071c3d857f) {'id': 'b405fc64-9724-498f-b405-e4071c3d857f', 'created_at': datetime.datetime(2020, 2, 18, 14, 33, 45, 729889),
'updated_at': datetime.datetime(2020, 2, 18, 14, 33, 45, 729907), 'first_name': 'person'}
(hbnb)
Usage: <class_name>.all()
(hbnb) User.all()
["[User] (99f45908-1d17-46d1-9dd2-b7571128115b) {'updated_at': datetime.datetime(2020, 2, 19, 21, 47, 34, 92071), 'id': '99f45908-1d17-46d1-9dd2-b7571128115b', 'created_at': datetime.datetime(2020, 2, 19, 21, 47, 34, 92056)}", "[User] (98bea5de-9cb0-4d78-8a9d-c4de03521c30) {'updated_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134362), 'id': '98bea5de-9cb0-4d78-8a9d-c4de03521c30', 'created_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134343)}"]
Usage: <class_name>.destroy(<_id>)
(hbnb) User.destroy("99f45908-1d17-46d1-9dd2-b7571128115b")
(hbnb)
(hbnb) User.all()
(hbnb) ["[User] (98bea5de-9cb0-4d78-8a9d-c4de03521c30) {'updated_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134362), 'id': '98bea5de-9cb0-4d78-8a9d-c4de03521c30', 'created_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134343)}"]
Usage: <class_name>.update(<_id>, <attribute_name>, <attribute_value>)
(hbnb) User.update("98bea5de-9cb0-4d78-8a9d-c4de03521c30", name "Todd the Toad")
(hbnb)
(hbnb) User.all()
(hbnb) ["[User] (98bea5de-9cb0-4d78-8a9d-c4de03521c30) {'updated_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134362), 'id': '98bea5de-9cb0-4d78-8a9d-c4de03521c30', 'name': 'Todd the Toad', 'created_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134343)}"]
Usage: <class_name>.update(<_id>, )
(hbnb) User.update("98bea5de-9cb0-4d78-8a9d-c4de03521c30", {'name': 'Fred the Frog', 'age': 9})
(hbnb)
(hbnb) User.all()
(hbnb) ["[User] (98bea5de-9cb0-4d78-8a9d-c4de03521c30) {'updated_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134362), 'name': 'Fred the Frog', 'age': 9, 'id': '98bea5de-9cb0-4d78-8a9d-c4de03521c30', 'created_at': datetime.datetime(2020, 2, 19, 21, 47, 29, 134343)}"]
uses the
unittest
module for testing.
path
to test files/for test coverage - directory:tests/test_models
Running tests using Python test discovery...
# execute tests using this command for all tests:
$ python3 -m unittest discover tests
# test file by file by using this command:
$ python3 -m unittest tests/test_models/test_base_model.py
You can find a list of contributors/project developers in the AUTHORS file.