{"id":21171496,"url":"https://github.com/tebogoyungmercykay/ionic_angular_native_mobile_application","last_synced_at":"2026-04-08T11:32:09.450Z","repository":{"id":163458542,"uuid":"638926593","full_name":"TebogoYungMercykay/Ionic_Angular_Native_Mobile_Application","owner":"TebogoYungMercykay","description":"Ionic + Angular Native Mobile Car Application","archived":false,"fork":false,"pushed_at":"2023-07-21T11:02:15.000Z","size":113,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-31T05:22:15.011Z","etag":null,"topics":["android","angular","api","application","capacitor","cars-site","components","framework","ionic","ios","javascript","mobile-app","mobile-development","native","native-apps","search","ui","web-components"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TebogoYungMercykay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-10T11:57:34.000Z","updated_at":"2023-10-06T07:25:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"c386ded7-afac-401a-9c6a-e0f764ca004c","html_url":"https://github.com/TebogoYungMercykay/Ionic_Angular_Native_Mobile_Application","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TebogoYungMercykay/Ionic_Angular_Native_Mobile_Application","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FIonic_Angular_Native_Mobile_Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FIonic_Angular_Native_Mobile_Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FIonic_Angular_Native_Mobile_Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FIonic_Angular_Native_Mobile_Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TebogoYungMercykay","download_url":"https://codeload.github.com/TebogoYungMercykay/Ionic_Angular_Native_Mobile_Application/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FIonic_Angular_Native_Mobile_Application/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31554088,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","angular","api","application","capacitor","cars-site","components","framework","ionic","ios","javascript","mobile-app","mobile-development","native","native-apps","search","ui","web-components"],"created_at":"2024-11-20T16:06:37.564Z","updated_at":"2026-04-08T11:32:09.424Z","avatar_url":"https://github.com/TebogoYungMercykay.png","language":"PHP","readme":"The latest mobile app will be uploaded in July during recess after some adjustments and fixes.\n---\n# Polishing Full Stack Development Skills: Preparing for an Impressive Portfolio Website!\n---\n- The `ultimate objective` is to construct exceptional web applications and mobile apps. By the end of this journey, I aspire to possess the ability to develop both `client` and `server software` proficiently. Moreover, I aim to master `HTML`, `CSS`, `Javascript`, `jQuery`, `AJAX`, `MySQL`, `PHP` and Many More, Including `PHP APIs`, and to be able to program a browser using popular frameworks such as JavaScript, jQuery, Angular and many more, as well as a server using renowned technologies such as PHP, ASP, Python, or Node.\n---\n- ### `Some of The Topics to be Covered Include`:\n  - #### `LAMP Stack`\n    - HTML\n    - JavaScript\n    - CSS\n    - PHP\n    - MySQL\n  - #### `MEAN Stack`\n    - MongoDB\n    - ExpressJS\n    - Angular\n    - NodeJS\n  - #### `Android and Hybrid Mobile Development`.\n  - #### `Extra Topics`\n    - XML\n    - AJAX\n    - JSON\n    - JQuery\n    - Bootstrap\n    - Ionic\n    - Angular\n    - Capacitor\n    - Native Mobile Applications\n    - TypeScript\n    - Logs\n    - Network protocols and sockets.\n    - Distributed internet and blockchain.\n    - Security (SQL database attacks, security, encryption, and hashing).\n    - Other topics of current interest (Advanced Security, Cloud Computing, TailwindCSS).\n---\n---\n## NOTE WELL!!!!\n---\n##### The `Complete` Car Site (Languages Used: HTML \u0026 CSS, JS, PHP, SQL and many more) is in a `separate` repository ([Visit The Complete Web Development Practice Space](https://github.com/TebogoYungMercykay/The-Complete-Web-Development-Practice-Space.git)), So This is the final implementation of the Car Site, Which will be a migration of the Car Site to a `Native Mobile App using Ionic Angular`, You may view the worlflow in the following sections which includes all the languages and details about the Car Site in the Separate repository.. (`Thanks For The Visit!`).\n---\n---\n### Mobile Native App using Ionic Angular\n- Details: Had to Pause a Bit due to School Work - It wil be uploaded as soon as possible.\n- The App is currently Under Constrction\n---\n### The `\"The Complete Web Development Practice Space\"` Repository Directory Looks Like This.\n- ### `README.md`\n- ### `JermanOttoCarSite`\n  - #### `PA1`:\n    - css\n    - HTML\n    - img\n  - #### `PA2`:\n    - css\n    - HTML\n    - img\n    - js\n  - #### `PA3`\n    - css\n        - jerman-otto-styles.css\n        - loader.css\n    - database_dumbs\n        - carsdb.sql\n        - Usersdb.sql\n    - img\n        - \u003eBackround_Images\n        - log.jpg\n    - js\n        - brands.js\n        - carListing.js\n        - compare.js\n        - findCar.js\n        - loader.js\n        - validate-sign-up.js\n    - php\n        - api_confiq.php\n        - api.php\n        - Brands.php\n        - Compare.php\n        - config.php\n        - FindCar.php\n        - footer.php\n        - head.php\n        - header.php\n        - index.php\n        - login.php\n        - logout.php\n        - signup.php\n        - validate-login.php\n        - validate-signup.php\n    - ReadME.md\n\n  - #### `PA4` (FILES NOTE YET COMMITED!!):\n    - DONE WITH THIS PART, TESTING IF EVERYTHING WORKS PERFECTLY (DELAYED UPLOADING JUST TO MAKE SURE EVERYTHING WORKS PERFECTLY).\n    - css\n        - jerman-otto-styles-dark.css\n        - jerman-otto-styles-light.css\n        - loader.css\n        - settings.css\n    - database_dumbs\n        - carsdb.sql\n        - preferences.sql\n        - rating.sql\n        - Usersdb.sql\n    - img\n        - \u003e Backround_Images\n        - \u003e Backround_Images_Light\n        - logo.jpg\n    - js\n        - brands.js\n        - carListing.js\n        - compare.js\n        - findCar.js\n        - loader.js\n        - theme.js\n        - validate-sign-up.js\n    - php\n        - api_confiq.php\n        - api.php\n        - Brands.php\n        - Compare.php\n        - config.php\n        - FindCar.php\n        - footer.php\n        - head.php\n        - header.php\n        - index.php\n        - login.php\n        - logout.php\n        - settings.php\n        - signup.php\n        - validate-login.php\n        - validate-signup.php\n    - ReadMe.md\n  - #### `PA5`\n    - The Code for PA5 is In this Repository.\n- ### `index.html`\n- ### `api.php`\n- ### `...`\n---\n- # Name of imaginary Company: Jerman Otto:\n\n    - \u003cimg alt=\"Company Logo\" src=\"https://github.com/TebogoYungMercykay/The-Complete-Web-Development-Practice-Space/blob/a6148c640017c5c388cccec49fda6cd4d138f7aa/JermanOttoCarSite/PA1/img/logo.jpg\" width=\"300\" height=\"300\"\u003e\n\n---\n\n# Topics In Brief Per PA Sub-Folder From 1 To 5 For The Cars Site\n- # `PA1`\n  - Created a web page which complies to the HTML5 standards and CSS styling.\n    - http://validator.w3.org/, https://jigsaw.w3.org/css-validator/\n    - ## `Functionality:`\n\n      - A navbar from where navigation to each component/part is showcased.\n      - A client must be able to navigate through all the PAs from the Launch Page.\n      - An \"under construction\" page which is the page displayed if the tab has not as yet been completed.\n      - Making sure that the web works in as many browsers as possible.\n      - Layout, Backrounds, Fonts, Text, Boxes, Colours, Sizes and etc.\n    - ### Workflow: Only HTML and CSS with Mock Data\n      - Launch Page with Logo.\n      - Navigation Bar on all created Pages.\n      - Cars Page\n        - Searchbar.\n        - Filters.\n        - Sort.\n      - Branch Page\n        - Brand Logo.\n        - Name.\n      - Find Me a Car Page\n        - At least 6 Questions.\n        - 4 Required.\n        - 2 Optional.\n      - Comapre Cars Page.\n      - Under Construction.\n    - Example Code HTML \u0026 CSS (Check jerman-otto-styles.css and Brands.html, Path: JermanOttoCarSite/PA2)\n      ```html\n      \u003c!DOCTYPE html\u003e\n      \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n          \u003cmeta charset=\"UTF-8\"\u003e\n          \u003ctitle\u003eTitle\u003c/title\u003e\n          \u003cmeta name=\"author\" content=\"Selepe Sello\"\u003e\n          \u003cmeta name=\"description\" content=\"Example HTML \u0026 CSS Code For My ReadMe.md\"\u003e\n          \u003cmeta name=\"keywords\" content=\"South Africa\"\u003e\n          \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n          \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n          \u003clink rel=\"icon\" href=\"../logo.jpg\" type=\"image/icon type\"\u003e\n          \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"#\" integrity=\"#\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"/\u003e\n          \u003cstyle\u003e\n              /* CSS for listing cars */\n              .Example-CSS-For-Listing-Cars {\n                  display: grid;\n                  grid-template-columns: repeat(auto-fit, minmax(210px, auto));\n                  grid-gap: 50px;\n                  margin: 50px auto;\n                  color: rgb(203, 242, 255);\n                  max-width: 1240px;\n                  padding: 20px;\n                  border-radius: 15px;\n                  background-color: rgba(0, 0, 0, 0.75);\n              }\n          \u003c/style\u003e\n      \u003c/head\u003e\n      \u003cbody class=\"background-brands\"\u003e\n          \u003cheader\u003e\n              \u003c!-- Navigation --\u003e\n              \u003cdiv class=\"topnav\"\u003e\n                  \u003ca href=\"#\"\u003e\u003ci class=\"fa fa-home\" aria-hidden=\"true\"\u003e\u003c/i\u003e Home\u003c/a\u003e\n              \u003c/div\u003e\n          \u003c/header\u003e\n          \u003csection id=\"logo\" class=\"mt-5\"\u003e\n              \u003c!-- Logo placeholder --\u003e\n              \u003cimg src=\"JermanOttoCarSite/PA1/img/logo.jpg\" alt=\"Logo\"\u003e\n          \u003c/section\u003e\n          \u003cdiv class=\"Example-CSS-For-Listing-Cars\"\u003e\n              \u003c!-- Sample text for brands listing: Mock Data --\u003e\n              \u003cp\u003eBrand 1\u003c/p\u003e\n              \u003cp\u003eBrand 2\u003c/p\u003e\n              \u003cp\u003eBrand 3\u003c/p\u003e\n              \u003cp\u003eBrand 4\u003c/p\u003e\n              \u003cp\u003eBrand 5\u003c/p\u003e\n              \u003cp\u003eBrand 6\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cfooter class=\"footer-bottom\"\u003e\n              \u003c!-- Footer text and email link --\u003e\n              \u003cp\u003eJerman Auto © 2023 All Rights Reserved! \u003ci class=\"fab fa-linkedin\"\u003e\u003c/i\u003e \u003ca href=\"mailto:sbkskhalo.kq@gmail.com\"\u003eEmail\u003c/a\u003e\u003c/p\u003e\n          \u003c/footer\u003e\n      \u003c/body\u003e\n      \u003c/html\u003e\n      ```\n---\n---\n- # `PA2`\n  - ### I will develop this using XAMP\n    - Loading Screen.\n    - JavaScript Animations.\n    - JQuery for DOM manipulation.\n    - Retrieving data from APIs.\n    - Populating your templates with the retrieved API data.\n    - Implementing the Find me a car page.\n    - Implementing the Compare page.\n  - ### API Functionality\n    - AJAX.\n    - JSON Manipulation.\n    - Cars/Brands have the correct image pulled from the API.\n    - DOM Manipulation.\n    - All API calls are done through JavaScript AJAX XMLHttpRequest and jQuery.\n    - The data from the API loads dynamically when the user views the page.\n    - I used asynchronous so that the execution of one task doesn't dependent on another. Basically multiple tasks can run simultaneously.\n  - #### Workflow: No Mock Data!!\n    - CARS PAGE\n      - Data Population -\u003e Replace Mock Data from prev Cars Page.\n      - Search, Filters and Sorting works.\n      - Loading Screen.\n    - BRANDS PAGE\n      - Data Population -\u003e Replace Mock Data from prev Brands Page.\n      - Loading Screen\n    - FIND ME A CAR\n      - Correct results are Displayed.\n      - Correct use of API parameters.\n    - COMPARE PAGE\n      - Car Selection works.\n      - Compare Stats Show.\n  - API Request Example Code (Check carListing.js, path: Path: JermanOttoCarSite/PA2/js)\n    ```javascript\n    function carListingAlgorithm(jsonObject1) {\n        var jsonObject;\n        if (jsonObject1 === undefined) {\n            jsonObject = {\n                \"studentnum\": \"uXXXXXXXX\",\n                \"apikey\": \"a9198b68355f78830054c31a39916b7f\",\n                \"type\": \"GetAllCars\",\n                \"limit\": 21,\n                \"return\": [\"make\", \"model\", \"body_type\", \"engine_type\", \"transmission\", \"max_speed_km_per_h\"],\n                \"sort\": \"max_speed_km_per_h\",\n                \"order\": \"DESC\",\n                \"fuzzy\": false\n            };\n            console.log(\"Please enter a valid request with at least one parameter\");\n            alert('Please enter a valid request with at least one parameter');\n        }\n        else {\n            jsonObject = jsonObject1;\n        }\n        resetDiv(\"cars-listing\");\n        var json = JSON.stringify(jsonObject);\n        $.ajax({\n            url: `https://wheatley.cs.up.ac.za/api/`,\n            method: \"POST\",\n            data: json,\n            success: function(response) {\n                for (let k = 0; k \u003c response.data.length; k++) {\n                    var tempVar = response.data[k].make.toLowerCase();\n                    createCars(tempVar, response.data[k]);\n                }\n            },\n            error: function(jqXHR, textStatus, errorThrown) {\n                console.log(\"Status code: \" + jqXHR.status + \" Status text: \" + textStatus);\n                console.log(\"Error thrown: \" + errorThrown);\n            }\n        });\n    }\n    ```\n---\n---\n- # `PA3`\n  - Using a MySQL DB with PHP.\n  - Create PHP API.\n  - User Registration with an API.\n  - API key Generation and Authorization.\n  - I will use the PHP cURL library for the API  development.\n  - Default login details (username and password) for a user I have on the API.\n  - I will be using phpMyAdmin.\n  - ### Workflow Setup:\n    - #### READMe Specifying:\n      - How to use the website\n      - Explanations for the password requirements, choice of hashing algorithm and generation of API keys\n    - #### Basic setup and page construction\n      - Making use of the include function to stitch pages together.\n        ```php\n        \u003c?php\n            // file.php\n            echo \"This is the main file.\";\n            include \"calculate.php\";\n            // Calling a function from the included PHP(calculate.php) file\n            echo \"The sum of 2 and 3 is \" . GetSum(2, 3);\n        ?\u003e\n        \u003c!-- calculate.php --\u003e\n        \u003c?php\n            function GetSum($num1, $num2) {\n                $sum = $num1 + $num2;\n                return $sum;\n            }\n            function GetDifference($num1, $num2) {\n                $diff = abs($num1 - $num2);\n                return $diff;\n            }\n        ?\u003e\n        ```\n      - config.php, header.php, footer.php, api.php\n      - login.php, validate-login.php, logout.php\n      - signup.php, validate-signup.php\n      - Database (MySQL DB Dump)\n      - Example of a database Dumb: `users.sql`\n        ```sql\n        CREATE DATABASE  IF NOT EXISTS `example_db`\n        USE `example_db`;\n        -- MariaDB dump 10.19  Distrib 10.7.3-MariaDB, for Win64 (AMD64)\n        -- Remember to add your student number as the database name!\n        -- Host: path/to/host    Database: example_db\n        -- Server version\t10.3.31-MariaDB-0+deb10u1\n        -- Table structure for table `users`\n        DROP TABLE IF EXISTS `users`;\n        CREATE TABLE `users` (\n            `id` int(11) NOT NULL AUTO_INCREMENT,\n            `name` varchar(50) NOT NULL,\n            `surname` varchar(50) NOT NULL,\n            `email` varchar(100) NOT NULL,\n            `password` char(30) NOT NULL,\n            `time_created` int(11) NOT NULL,\n            PRIMARY KEY (`id`),\n            UNIQUE KEY `email` (`email`)\n        ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4;\n        -- Dumping data for table `users`\n        LOCK TABLES `users` WRITE;\n        -- Inserting values into the DB\n        INSERT INTO `users` VALUES\n        (1,'Default','User','default@u.c','d9d8c68a295f34ad3ef590a4b683f3',1652881570);\n        -- DONE\n        UNLOCK TABLES;\n        -- Dump completed on 2022-05-19 12:15:54\n        ```\n      - User information includes the following fields:  \"id\", \"name\", \"surname\", \"\"email\", \"password\", \"API key\".\n  - #### User Registration\n    - The goal is for the user to be able to enter in various details on a form on the signup page and register an account on the car website.\n    - A signup-validation function which checks (using JavaScript and PHP)[i.e. Both client and server-side validation] whether the information is correct or not. If it is valid, the user is added to the relevant table in the database.\n    - Making sure the user can easily register/login to the site.\n    - Signup form on the signup page (signup.php) with the following fields:  \"name\", \"surname\", \"email\", \"password\".\n    - Using JavaScript to check that all the fields are filled out correctly.\n    - Email address should have an '@' symbol and the Password should be longer than 8 Characters.\n    - The Password must also , contain Upper and Lower case Letters, at least One Digit and One Symbol (JS Regex will help).\n    - Making use of POST to submit the form information to signup-validation.\n        ```html\n        \u003cform method=\"post\" action=\"signup-validation.php\"\u003e\n            \u003clabel for=\"name\"\u003eName:\u003c/label\u003e\n            \u003cinput type=\"text\" id=\"name\" name=\"name\"\u003e\u003cbr\u003e\n            \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\n            \u003cinput type=\"email\" id=\"email\" name=\"email\"\u003e\u003cbr\u003e\n            \u003clabel for=\"password\"\u003ePassword:\u003c/label\u003e\n            \u003cinput type=\"password\" id=\"password\" name=\"password\"\u003e\u003cbr\u003e\n            \u003cinput type=\"submit\" value=\"Sign up\"\u003e\n        \u003c/form\u003e\n        ```\n    - Add user to DB if it doesn't exist, hash password, Add salt, If user already exist an error must be dispayed!!.\n  - #### Creating a PHP API\n    - I will make use OOP to create the API class. File name \"api.php\".\n    - API should only produce/consume structured JSON data.\n    - I will be recreating a modified version the \"Get All Cars\" section of the API used for PA2 (API Documentation.html).\n    - I should be able to use SQL Queries to extract data from the database dynamically.\n    - In order to make server side external requests in PHP I will use the PHP cURL library.\n    - ##### Additional Resources:\n      - http://php.net/manual/en/curl.examples.php\n      - https://stackoverflow.com/questions/3062324/what-is-curl-in-php\n      - https://www.startutorial.com/articles/view/php-curl\n    - The API should should be able to cater for invalid input by returning an error back that will be handled client side.\n  - #### EXAMPLES\n    - ## These are the Default Users for the Jerman Otto Cars Page:\n      - #### `Default User 1`:\n        - Name: Test\n        - Surname: User\n        - Email: testuser@tuks.co.za\n        - Password: `@TestUser#564`\n        - API_key: `a9198b68355f78830054c31a39916b7f`\n      - #### `Default User 2`:\n        - Name: John\n        - Surname: Doe\n        - Email: johndoe3@gmail.com\n        - Password: `tEst@us5e#hd`\n        - API_key: `K9yW8cGnE3qTfR7xV2sZ6bN1mJ4jL5p`\n    - ##### FOR THE EXAMPLE REQUETS BELLOW, NB:=\n\n      - The `studentnum` field is not being tested nor used on the API, It us just here for `fun/vibes`.\n      - Please use the `API_keys` on the `database` to make requests to the REST API. They are included in `SECTION 1`\n      - ##### Example 1: POST Request by User 1:\n        ```json\n        {\n            \"studentnum\":\"u12345678\",\n            \"type\":\"GetAllCars\",\n            \"limit\":2,\n            \"apikey\":\"a9198b68355f78830054c31a39916b7f\",\n            \"search\":{\n                \"make\":\"BMW\",\n                \"body_type\":\"Coupe\"\n            },\n            \"fuzzy\": true,\n            \"sort\":\"id_trim\",\n            \"order\": \"ASC\",\n            \"return\":[\n                \"id_trim\",\"max_speed_km_per_h\",\"body_type\",\"engine_type\",\"transmission\",\"image\"\n            ]\n        }\n        ```\n      - ##### Response form API\n        ```json\n        {\n            \"status\": \"success\",\n            \"timestamp\": 1680911562,\n            \"data\": [\n                {\n                    \"id_trim\": \"4417\",\n                    \"max_speed_km_per_h\": \"250\",\n                    \"body_type\": \"Coupe\",\n                    \"engine_type\": \"Gasoline\",\n                    \"transmission\": \"Manual\",\n                    \"image\": \"https://wheatley.cs.up.ac.za/api/images/models/bmw_1m.jpg\",\n                    \"image_brand\": \"https://wheatley.cs.up.ac.za/api/images/brands/bmw.png\"\n                },\n                {\n                    \"id_trim\": \"4464\",\n                    \"max_speed_km_per_h\": \"250\",\n                    \"body_type\": \"Coupe\",\n                    \"engine_type\": \"Gasoline\",\n                    \"transmission\": \"Automatic\",\n                    \"image\": \"https://wheatley.cs.up.ac.za/api/images/models/bmw_2 series.jpg\",\n                    \"image_brand\": \"https://wheatley.cs.up.ac.za/api/images/brands/bmw.png\"\n                }\n            ]\n        }\n        ```\n      - ##### Example 2: POST Request by User 2:\n        ```json\n        {\n            \"limit\":2,\n            \"apikey\":\"K9yW8cGnE3qTfR7xV2sZ6bN1mJ4jL5p\",\n            \"search\":{\n                \"make\":\"BMW\",\n                \"body_type\":\"Coupe\"\n            },\n            \"fuzzy\": true,\n            \"sort\":\"id_trim\",\n            \"order\": \"ASC\",\n            \"return\":[\n                \"id_trim\",\"max_speed_km_per_h\",\"body_type\",\"engine_type\",\"transmission\",\"image\"\n            ]\n        }\n        ```\n      - ##### Response form API\n        ```json\n        {\n            \"status\": \"error\",\n            \"timestamp\": 1680912205,\n            \"data\": \"Error. Post parameters are Missing\"\n        }\n        ```\n  - ## Basic Setup Before Running the Codes\n    - Import the `cars` table using the carsdb database dumb.\n    - Import the `users` table using the usersdb database dumb, or alternatively\n    - Create another table called `users` with the following fields: \"id\", \"name\", \"surname\", \"email\", \"password\", \"API_key\", \"salt\".\n    - The `id` field should be `Automatically` generated, Using `AUTO_INCREMENT=1`\n    - #### If You aren't Running the codes on wheatley:\n      - At least Have Xampp installed\n      - Copy the souce code to the httdoc directory\n      - Run Apache and MySQL server\n      - Use this URL to access the codes on XAMPP: \"http://localhost/path/to/code/login.php\"\n  - ## How the Sign Up and Login Works:\n    - A User must have an account to view the Cars for practical 3, and all the other pages.\n    - If a user doesn't have an account they can only access the `signup`, `login` and `launch` pages.\n    - A user can `create an account` and `login` without complications, I implemented The Sign Up and Login.\n    - When a user submits the signup form, the `'required'` from HTML will make sure all fields are filled,\n    - Then `JavaScript` will be loaded, And it will do signup validation on the `client side`.\n    - Thereafter, If `javascript` is done, the form will be sent to `validate-signup.php` via `POST`.\n    - This is to make sure the request is secured, Then `PHP` will do the validation on the `server side`.\n    - Once all the validation is done, the user will be added to the 'users' database table.\n    - ## `Sign Up Instructions:`\n      - All Fields SHOULD Not Be `Empty`\n      - The `NAME` and `SURNAME` fields SHOULD contain only Characters\n      - The `EMAIL` SHOULD contain '@gmail.com' or '@tuks.co.za', and AT LEAST a Character on the LEFT.\n      - Make sure the EMAIL doesn't contain `Illegal Characters`\n      - Make sure the PASSWORD is at least `8 Characters` long and contains a `Number`, Contains a `Special Character`, `Uppercase` and `Lowercase` letters.\n      - Make sure the PASSWORD doesn't contain Illegal Characters\n      - The PASSWORD and CONFIRM PASSWORD SHOULD `match`\n  - ##### This Is Implemented to make sure the Password is strong and it cannot be guessed or generated easily by Attackers.\n  - ## How The Encryption Algorithm Works\n    - Generate a `RANDOM` int, SALT value between `[2000000000, 2147483646]`.\n    - Encrypt PASSWORD using the random number as the `salt` with \"sha256\" and hash_pbkdf2 method, `hash_pbkdf2(\"sha256\", p, s, i, b)`;\n    - Using 1000 iterations for the hash_pbkdf2 method, and a HASH length of 32 BYTES, So that it can fit well into a column of this size =\u003e `VARCHAR(128)`.\n    - Finally i Concatenate the SALT and HASH and the encode the resulting string to base 64, using `base64_encode()`.\n  - ## API Key\n    - The API key is an `Alphanumeric` string of `length=32`.\n    - It Contains these Characters: `0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ`\n    - The Key is then Displayed to the User using an alert.\n---\n---\n- # `PA4`\n  - #### `ONLY REGISTERED USERS WILL HAVE ACCESS TO THE PAGES`\n  - Populating data using the API i created in PA3\n    - Adding more `filters` to the API\n    - Or modifying the Client side to work with the available filters.\n  - Cookie or Local DOM Storage\n    - Storing the `API key` in the `Local DOM Storage`.\n    - Using the API key to send `Requests` to the `API` in the `Server-Side`.\n  - Themes (`dark` and `light`)\n    - Using DOM Storage to keep the user preferences so that they are `saved` and remembered when the user `loads` the site\n    - Theme must be `dynamically` updated such that the user `doesn't` need to `reload` the page every time after the theme is loaded.\n    - The user must be able to save these `default settings` in the settings page.\n    - Example: THeme Implimentation in `javaScript`.\n    - ```javascript\n        var html = document.querySelector('html');\n        var themeStyle = document.querySelector('#theme-style');\n        var toggleButton = document.querySelector('#theme-toggle');\n        var defaultTheme = localStorage.getItem('default_theme');\n\n        if (defaultTheme \u0026\u0026 defaultTheme != \"N/A\") {\n            html.setAttribute('data-theme', defaultTheme);\n            themeStyle.setAttribute('href', `../css/jerman-otto-styles-${defaultTheme}.css`);\n            if(defaultTheme === 'dark'){\n                toggleButton.textContent = 'Dark Mode';\n            }\n            else {\n                toggleButton.textContent = 'Light Mode';\n            }\n        }\n\n        toggleButton.addEventListener('click', () =\u003e {\n            var theme = '';\n            if(html.getAttribute('data-theme') === 'dark'){\n                theme = 'light';\n            }\n            else{\n                theme = 'dark';\n            }\n            html.setAttribute('data-theme', theme);\n            localStorage.setItem('theme', theme);\n            localStorage.setItem('default_theme', theme);\n            themeStyle.setAttribute('href', `../css/jerman-otto-styles-${theme}.css`);\n\n            // toggle button text\n            if (theme === 'dark') {\n                toggleButton.textContent = 'Dark Mode';\n            }\n            else {\n                toggleButton.textContent = 'Light Mode';\n            }\n        });\n        ```\n  - `UPDATE` PHP API type\n    - Allowing the user to `change` their preferences.\n    - Preferences are the filters used in the previous PAs\n    - Making sure the filters are always applied(until changes are made).\n    - Implementing the functionality for `storing` and `updating` data on the `database`.\n    - There must be a settings page for saving preferences.\n    - Using the API to `return preferences` from the database and storing them in DOM storage.\n  - Implementing the ability to `rate` cars on the Cars page.\n  - Showing the `average rating` of the cars on the cars page from all users.\n---\n---\n## REQUIREMENTS BEFORE RUNNING THE CODES:\n- ### `A Text Editor`:\n  - A text editor is required to create, write and edit code.\n  - There are many free and paid text editors available online such:\n    - Visual Studio Code\n    - Sublime Text\n    - Notepad++\n    - Atom.\n  - VS Code: [Instalation Guide](https://www.youtube.com/watch?v=4zVObKFZ6fA\u0026ab_channel=TheCodeholic)\n- ### `Web Server`:\n  - A web server is required to serve web pages to users.\n  - You can use an existing web server like Apache or Nginx, or you can use a package like XAMPP or WAMP which comes with an integrated web server.\n  - ##### `Xampp Instalation Guide`:\n    - [Windows 10](https://www.youtube.com/watch?v=-f8N4FEQWyY\u0026ab_channel=edureka%21)\n    - [Windows 11](https://www.youtube.com/watch?v=VQpATELDSEI\u0026ab_channel=ProgrammingKnowledge2)\n  - Once `Xampp` is available:\n    - Copy the souce code to the httdoc directory\n    - Run `Apache` and `MySQL` server\n    - url:  `\"http://localhost/path/to/code/login.php\"`\n- ### `HTML`:\n  - Hypertext Markup Language is used to create the structure and content of web pages.\n  - You need a text editor to create HTML files with an \".html\" extension.\n- ### `CSS`:\n  - Cascading Style Sheets are used to style the HTML content.\n  - You need a text editor to create CSS files with a \".css\" extension.\n- ### `JavaScript`:\n  - JavaScript is used to add interactivity and functionality to web pages.\n  - You need a text editor to create JavaScript files with a \".js\" extension.\n- ### `PHP`:\n  - PHP is a server-side scripting language used for dynamic web content.\n  - You need a web server that supports PHP to run PHP scripts.\n- ### `AJAX`:\n  - Asynchronous JavaScript and XML are used to update web content without refreshing the page.\n  - You need JavaScript and a web server that supports AJAX.\n  - AJAX Example For Just Control\n    ```php\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eAJAX Example For Control\u003c/title\u003e\n        \u003cscript\u003e\n            function loadData() {\n                var requestVariable = new XMLHttpRequest(); // Object\n                requestVariable.onreadystatechange = function() {\n                    if (this.readyState == 4 \u0026\u0026 this.status == 200) {\n                        // DOM Manipulation\n                        document.getElementById(\"example_id\").innerHTML = this.responseText;\n                    }\n                };\n                requestVariable.open(\"GET\", \"URL\", true); // asynchronous\n                requestVariable.send(); // Send the request\n            }\n        \u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003ch1\u003eAJAX Example For Control\u003c/h1\u003e\n        \u003c!-- Calls loadData() when the button is clicked --\u003e\n        \u003cbutton type=\"button\" onclick=\"loadData()\"\u003eLoad Data\u003c/button\u003e\n        \u003cp id=\"example_id\"\u003e\u003c/p\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n- ### `jQuery`:\n  - jQuery is a JavaScript library that simplifies HTML document manipulation, event handling, and animation.\n  - You need to include jQuery in your HTML file by linking to it in your code.\n  - The Same AJAX Example Using jQuery Just For Control\n    ```php\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eAJAX Example For Control\u003c/title\u003e\n        \u003c!-- Including jQuery Library in out file --\u003e\n        \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js\"\u003e\u003c/script\u003e\n        \u003cscript\u003e\n            $(document).ready(function() {\n                $(\"#exampleButton\").click(function() {\n                    $.get(\"URL\", function(data) {\n                        // DOM Manipulation\n                        $(\"#example_id\").html(data);\n                    });\n                });\n            });\n        \u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003ch1\u003eAJAX Example For Control\u003c/h1\u003e\n        \u003cbutton type=\"button\" id=\"exampleButton\"\u003eLoad Data\u003c/button\u003e\n        \u003cp id=\"example_id\"\u003e\u003c/p\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n- ### `Web Browsers`:\n  - A web browser is necessary to render and display web pages.\n  - Popular web browsers include:\n    - Google Chrome\n    - `Mozilla Firefox`\n    - Safari\n    - Microsoft Edge\n    - `Brave`\n    - Opera\n    - Not Recommended: `Tor (Onion Routing)`\n---\n\n\u003cp align=center\u003e** THE END LOADING **\u003cp\u003e\n\n---\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftebogoyungmercykay%2Fionic_angular_native_mobile_application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftebogoyungmercykay%2Fionic_angular_native_mobile_application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftebogoyungmercykay%2Fionic_angular_native_mobile_application/lists"}