Phase 4 JavaScript Movie-Theater Project
Hi!
Welcome to my JavaScript Movie-Theaters project
In my Project i use for my back end Ruby on Rails and for frontend JavaScript Html Css
My frontend is communicating with a backend Api and I builted it with Ruby and Rails.
Objectives
My Goal with this project:
- Designing and architect features across frontend and backend
2. Integrating JavaScript and Rails
3. Building and iterate on a project MVP
4. Communicating in a technical environments
Backend
Ruby On Rails
I have 3 tables in my database . First one is User . In my username there is just username . You dont need password. You have to just type your username and then if you typed before it will let you login if its first time it will create new username and save my database
My second table is Theater . User has many Theaters . In my Theater Controler I have Index , Create , Show and Delete actions I am able to add new Theater with create and delete Theater with destroy action .
My last table is Movie . Theater has many Movies . I have only index action to show all my Movies
Frontend
Html Css and JavaScript
The src attribute specifies the url of an external script file. When I want to run the same JavaScript on several pages in my website , I create an external JavaScript file , instead of writing the same script over and over again . Save the script file with a js extension, and then refer to it using the src attribute in the script tag.
I have only one index.html file and build everything on this . There are navigation and with navigation.js file i build everything on it and for theater.js i used ‘div id= theater’
Ajax , Fetch and Json
AJAX stands for Asynchronous JavaScript and XML. This object allows me to load an external file and add its content to my webpage. The fetch() method is a way to send a network request and get information from the server . JSON stands for JavaScript Object Notation , Its a way to store my data . I used 3 AJAX calls . Create Username , Create Theater and Delete Theater
I am taking all data from User , Using this data taking as arguments(openNewTheater) pass into my ApiService
passing into JSON.stringfy(openNewTheater) and then parse a response , send the data to the backend
and create new data in my database
DOM
Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
I access div id =’theater’ in index.html and create a button add text in button and add this button to inside of div id =’theater’ and give click event to this button
Open this form for user to fill it
Thank you for reading this post
