After the environment setup is done for rails and now we can start with our applications and small blogs.
Before we start with our first rails app,Let us first check with our installations i.e., ruby and rails.So use the following commands.
After checking this we start with our work,Now open the terminal and start and if you want to create that at some specific place then open that directory.And now let us start!!!
rails new script
This means that we want to create a new folder named script.
A lot of things will happen now. Rails will create all the files and folders you need for your project, plus download some gems. Gems are plug-ins for making your life easier and we’ll talk about them later. This process may take a minute or two depending on your internet connection.
Now open the folder you have created
What happened till now?
Rails has just generated a lot of files and folders for us.Now our job is to code in it to get the expected output.There are many code editors like sublime and atom you can open anything and proceed the work.
It displays different files in this way where we need to code in.
Hey,the most important part before we start a project and doing it is planning and timing only these both show us where we reach and how fast we reach.According to me these both are the two important factors that turns us.So it is better for us to have a clear idea before taking a step in anything.So here we are going to create a list of jobs and insert the url and these gets saved into a database.
Before we move forward with our application we have to first see whether we have the required gems to move further.
For this we need gem kaminari, and now we should open vendor/gem file in the folder and make the necessary changes.
Now there we add the following:
When we write something,we should first save the changes else our work goes in vain.Do save the changes every time you do anything.
And now gems are ready to be installed. To download them to your project, go back to your terminal and type
So whenever we add a gem to a gem file then run the above command in the terminal.
Now we will proceed our work with models,views and controllers.
Our first model is a Job model and it has three columns (ignoring the job number column) which are title, company and URL. We’re going to store them all as strings.
We can store data in any format we want such as numbers, booleans and dates. But now we want strings format so we are going with it.
In the terminal,we type:
rails generate model Job title:string company:string url:string
This creates files that are needed for our site and will be very helpful.
let’s update our database with our new Job model. In our terminal, we type :
Even though we have just one job model, we have two different pages on the site. We have a home page (or index page) and an add page (or new page).
add your controller and views
We only need one controller at this point — solely dealing with the listing and addition of jobs. Just like with models, Rails makes controllers conform to conventions. Controllers are lower case and plural — so for this it would be “jobs”, “users”, “bookmarks” or “photos”.
Lets go back to our terminal and type in:
rails generate controller jobs index new
Rails is generating a controller called jobs and we’re also creating index and new pages with that controller.
For our site, we want to add in some URLs for going to different page. We have two particular pages that we want to go to. The home page and the add a job page.
To add these URLs we need to go back to our code editor. We need to find the file inside the config folder called routes.rb
Here we can add our URL’s.
Lets go back to the terminal and run our code. Type in
We have a website! If we go to http://0.0.0.0:3000 or http://localhost:3000 in our browser, our code will run. It’s not much, but it’s something!
Saving our models
Go to app/models/job.rb in our file
You will find a single line code there so now we add a little more to it!
And now go to – app/controllers/jobs_controller.rb
Even here there exist some previous code return by us and now we add little more to it.
Job.new means “hey, Job model, can we make a new one of you?”. But what about the first bit “@job”? This means send the new job we’ve created to our HTML so we can use it.
Next we go to – app/views/jobs/new.html.erb
We are going to add the code here too
What this is doing is making a form for the new job we made in our controller with the columns in a particular order that we want. Save the file and refresh the page and you’ll get something like:
So far we got this,we will be able to fill this form and when we click on create a job it doesn’t and shows us an error.
Again, Rails has conventions. Whenever we have a new page, we submit the form and it goes to a create page. The create page is where the form data gets checked against the validations and if it passes, saves into the database. If it doesn’t pass, we want to show the form again with errors.
We actually have three pages on our site: index (home page), new (form page) and create (actually add the data from the form page).
Let’s go back to our jobs controller and add this create page to it. I’ve added in the following to our controller:
So we’re creating a new job from our model, then if it saves, go to the home page (Rails likes to call this the “root path”), if it doesn’t save, render (or plainly, show the user) the HTML view called new.
Let’s change one line in our create method to add this form data in. Change line 10 from:
What we’re saying here is make a new job from the form data but only allow jobs to be submitted with title, company and url data.
Now when we add in a new job, it should go back to the home page. That’s great but the last problem is that we can’t see any jobs on the home page!
The home page
Remember that Rails calls our home page the index page. Think of an index as being a list and in this case, our home page is a list of jobs. In our controller we want to get all our jobs in our database to show our users.
Let’s change our index page in our jobs controller from:
Here we have the home page getting all the jobs from the Job model and sending it to the HTML view as @jobs (we could name @jobs anything we want by the way, @all_jobs for example).
Last thing we need to do is add those jobs to our home page’s HTML.Go to:app/views/jobs/index.html.erb
Let’s change all the text in index.html.erb to:
We added a job earlier but there will be multiple jobs in here so we want to loop over each job and do some HTML with it. Let’s change all the text in index.html.erb to:
Firstly, we have a title at the top called “Jobs” — that’s not anything special, you can change “Jobs” to “London jobs”.
The mid part is a loop. It takes each individual jobs from the controller and adds some particular HTML for each one. If there are 5 jobs, there will be 5 <div> tags with the class “job”, each with a <h2> tag and a <p> tag inside.
The last part has a tag called link_to. This is part of Rails and will make a link that goes to the new job page. There’s some magic underneath it all but it saves you from having to write <a> tags yourself.
We can click on“add a job” and fill in the form again.
For a better look we add this:
replace the text there with
And now get back to the local host and find the page.
And that is all!!!