DEV Community: Zachary Sirna

Aliased Associations Ruby on Rails

Zachary Sirna — Thu, 16 Mar 2023 20:43:07 +0000

In Ruby on Rails, foreign keys are used to establish associations between different models. They allow you to link records in one table to records in another table. These foreign keys create relationships between tables. Although sometimes you may need to have two different keys from the same model in a new model. In this blog post, I'm going to briefly demonstrate how to use foreign keys in Ruby on Rails to do it.

Let's say you have a "User" model, and you want to create a new model called "Meeting" to store information about meetings between users. Each user will have need a unique foreign key. Lets call the foreign keys "sender_id" and "receiver_id". Both of which will use the "id" column in the "User" model.

Now the first place to start when must creating this association is the new model.

Create the "Meeting" model:

First, we need to create a new model called "Meeting" using the Rails generator:

This will create a new migration file for the "Meeting" model. Now we need to go into the migration file to update that before migrating.

Update the migration file:

Now we need to update the migration file to have foreign keys. One for the user receiving the meeting and one for the user sending the meeting. The foreign keys of "receiver_id" and "sender_id" will allow the user id to be passed as an alias to the meeting table twice one user as a receiver and one user as a sender.

Then run "rail db:migrate"

Update the models:

Finally, we need to update the "User" and "Meeting" models to establish the associations between them:

In the "User" model, we have two "has_many" associations with the "Meeting" model. The "has_many :sent_meetings" and "has_many :received_meetings" They both point to the class name of "Meeting" and have unique foreign keys.

In the "Meeting" model, it has two "belongs_to" associations with the "User" model. We used the "class_name" option to specify the name of the associated model, and specified it to use the same foreign key that associates with it from the "User" model.

Now you can create and retrieve meetings between users. With each Meeting having two foreign keys from the "User" model you can now call "user.received_meetings" or "user.sent_meetings" to retrieve the associated data. As always still a student so I am still learning but hopefully this has been helpful.

Basic Secure User Sign-up using Ruby on Rails

Zachary Sirna — Mon, 31 Oct 2022 19:00:58 +0000

I am going to go over setting up a user sign-up, sign-out, and logout using sessions for authorization with Ruby on Rails. Side note I will not be going into putting this into application on the frontend.

Before I jump I will describe session data. In Ruby on rails the application can hold small amounts of data for each user. That data will remain between requests. We will need to store that data using cookies. It must be set up in the controllers. As we go through we will get into creating the session in the controller and enabling cookies.

We are going to start from scratch. In your terminal create a new folder and the cd into that folder. Then while in that folder type "rails new the-app-name --api --minimal --database=postgresql". This will build a new rails project using Postgresql. I am choosing Postgres incase this project will be deployed later using Heroku.

Now open the project on a code editor. I will be using VsCode. The gem for 'bcrypt' must be add to the Gemfile. bcrypt() is a sophisticated and secure hash algorithm designed by The OpenBSD project for hashing passwords. The bcrypt Ruby gem provides a simple wrapper for safely handling passwords.

Next we want to run bundle install. This will install all the necessary the Gemfile dependencies needed from the terminal.
Then we need to use some generators to create a model, a migration file and controller for user and a sessions controller . Run rails g resource User to create a model a controller for the User being signed up, logged in, or logged out.

Then we can just use a controller generator for the sessions controller.

Now we need to code the necessary columns to our user migration file. We will add a username and a password_digest. password_digest stores the salted password and the return value of BCrypt. It then concatenates them to produce a character string to separate them. This creates a very secure way of storing and encrypting passwords.

Now start the Postgres server, run rails db:create, and finally run rails db:migrate.

Time to begin our coding by starting in the routes file. We create two posts, a get, and a delete. The “/me” route will be used to allow the front end to know who the user is after when the page loads. The “signup” route will allow a user to create their username and password. The “/login” will verify and then login the user. Then finally the logout will remove the stored session.

Following add has_secure_password and validations into the User model. The has_secure_password adds methods to set and authenticate against a BCrypt password. Then the validations will ensure there will only be no duplicate usernames and that a username must be added in order to successfully process.

Afterwards add a create and show inside the User controller. The User create will allow a user to sign up. It will then store the user id in the session. That will be passed to our application controller, that we will set up shortly, which will authorize and then send back to our show method the instance method of the current user to show the frontend to the current user.

Now to create a show and destroy in the Sessions controller. The create method in this controller will allow a user to sign in. It will authenticate the username and the password and then it will send the session id over to the application controller which will authorize and then send back to our show method the instance method of the current user to show the frontend to the current user. The the destroy method will remove the session and the user will be successfully logged out.

Lastly we will update the Application controller in order to find the current user based off the session user id to create an instance of the current user. Before it performs this action it will authorize which is why we have added before_action :authorize. We have also included an ActionController for Cookies so the session data can be temporarily saved. Plus we are adding a rescue from incase the information provided is incorrect.

Now we need to add Cookies into the config file. A cookie is a piece of data from a website that is stored within a web browser that the website can retrieve at a later time. Cookies are used to tell the server that users have returned to a particular website. This allows for the frontend to temporarily store our sessions data so that the current user will persist while using the website.

Now we have a backend ready to talk to the frontend to use a secure user sign-in, sign-up, login and logout. I am currently still a student so I am also still learning but hopefully this has been helpful.

Getting started, Sinatra Backend with Active Record(Ruby)

Zachary Sirna — Thu, 02 Jun 2022 19:16:52 +0000

I just want to give a brief overview on how one can get started building a backend that uses Sinatra with Active Record coding in Ruby. With this blog there are some assumptions that one will know the frontend CRUD to talk to the backend. Let's start with a new VS code window.

We are going to create a bunch of folders and files. For now let's go off this screen shot. Everything on here is empty so we will go into the purposes of each and fill them out as we go.

Let s start with our Rakefile.

What is happening here is the first description will start the server for us once we enter into the console and type rake server. The next two lines are designating a port in which to run the local server on. Then the next line rerun allows auto-reloading of server when files are updated. Finally the last line allows us to call rake console in the terminal to enter into Pry.

Now our Gemfile. I'll leave in the comments as there own descriptions of each gem.

Our config.ru will look like this.

Rack::Cors allows for Cross-Origin Resource Sharing request. Rack:JSONBodyParser will parse the json from the request body into params hashes.

Next we are going to go all the way up to the config/ environment.rb. We will not use the db migrate until we start building our tables.

The first line is an environment variable that is used by some of the Rake tasks to determine if our application is running locally in development, in a test environment, or in production. The next two lines require our Gems.The last line requires all files in 'app' directory.

Finally we just need to create the inheratence relationship in our Application Controller.

Alright now lets create some tables to work with. Open your terminal and cd into Server. Run "bundle install". That will install all of our gems. Now we can create our tables. We will create a table called "humans". Type "rake db:create_migration NAME=humans". Once you hit enter you will see that the terminal will display that there is a new file in the migrate folder. You will also see it in the explorer with the timestamp that it was created.

Remember that we need to be very specific with our naming conventions. Models and Classes are singular. Tables and schema are plural.

Let's create another table called "dogs". Then we will create a relationship between the two and build the tables. Type "rake db:create_migration NAME=dogs" into the teminal. Alright now we have two tables to work with.

In our humans migrate file we will create a table using the "create_table method. It will look like the following to give us three columns. The id will be the first column and that will be auto generated. The second will be their first name and the last will be their last_name.

Now lets work on our dogs. It will look very similar but we will add a foriegn key to establish a relationsip between a dog and their human.

Now we can run "rake db:migrate" to create our SQLite tables.

We can now see the schema that was created by active record as well.

In app/models we build the classes for dogs and humans. Remember their classes will be singular.

Our classes will look like the following inheriting from ActiveRecord::Base.

Now we have the base for our Sinatra backend. Next blog we will go over how to create instances of the classes to populate data. Also how to create a seed file to add data. Then how to use the Application Controller to allow for CRUD.

Adding A PopUp with JSX and Components

Zachary Sirna — Tue, 19 Apr 2022 17:59:35 +0000

For my second project for school I built a web based application for sifting through a database of movies. This application allows users to select movies out of a database and then add them to their personal watch list. I didn't want the movie list component of the application to get too crowded with information so I wanted to implement a pop up window. Unfortunately the popup window wasn't as simple to implement as I had hoped. In this blog I will provide my insights on what I have learned and hopefully it will help others. Note I'm still learning and this is more so guidance then a full lesson from an expert.

Let's get started. Here is a link to my repo. Clone and follow the ReadMe to run this in your code editor. https://github.com/Zander618/HorrorWatchList. If you navigate to the MovieList tab you can see what the popup I am refering to looks like if you click more info on any given movie.

To simplify my instructions I'll start from scratch. If you need additional instrusctions on starting a react app here is a link to React's website to create a react app. https://create-react-app.dev/ .After you run npx create-react-app my-app-name we can navigate into that new folder by cd-ing into it. Let's open it in our code editor using (code .). Then we can open it in the browser with npm start in the terminal or yarn start if you have yarn installed. You should see this as the boilerplate code.

Alright so the app works. Let's get rid of all this stuff to start with our own code.

We are going to remove App.css, App.test.js, logo.svg, reportWebVitals.js, and setupTests.js. The index.css can stay for styling. However I will not be going into styling today. Simply right click on the item and go down to delete permanently. In index.js remove the imports related to the components we have deleted.

The end result should look like this. Save and move on.

Next in App.js let's delete everything and start from scratch. We are going to simply add an H1 and a button tag between two div tags to the needed component code. I am using the react arrow function component. It should look like this.

Now we have something on our React App :)

From here we need a new component to be the popup. Click on add new file. Let's call it popup.js. Inside popup.js we are going to create a div tag within a div tag and a button tag inside of the two divs with some class names for some styling.

Let's create a popup.css to style this popup. Click on new file and name it popup.css. Without going into styling detail, this css displayed below will center your popup, give it some color to separate from the background and also position the close button in the top right.

Make sure to import the css into your Popup.js component (import "./popup.css").

Back to our App.js. Here is the magic. Let's import our Popup.js and then place it under our button. Now let's add state to trigger this popup. Import {useState} above and lets declare state. We will call it [buttonPopup,setButtonPopup]. We are going to set that state to false. Now we need to be able to change that boolean value. We are going to add an on click to our button.
Finally let's pass that value as a prop to our Popup.js. When done it should look like this.

Now back in our Popup.js. We are going to create a ternary to show the popup using the popup as the true value. If it is truthy it will display the content and if it is falsey it will display nothing. We are going to use an empty string as nothing. We will then add a title and a description under it using an h3 tag and a p tag. That code should look like the following image below.

Success we have a pop up! When you click on POP UP you'll see our popup. Now we just need to work on closing it.

Now we need to pass our setButtonPopup as a prop to Popup.js. Back in Popup.js we will add that prop and put an onClick to the button inside our divs. We will then set that value to false and that will then change the value back to false. Now we can open and close our popup. SUCCESS!

Are you fetching too much?

Zachary Sirna — Tue, 22 Mar 2022 15:28:59 +0000

You have created an awesome project. Everything works and it looks clean. Let's go and show this to the instructor. The instructor says something like "Wow, I like this. You're doing a great job and I like the progress you're making but...". Oh no they said "but". "But what?" you ask. "You are fetching data an awful lot of times". You now realize that you sure are fetching data a lot. Pretty much every event listener you intergraded is refetching data you could just store. Now the questions are:

How do I store this data in a variable?,
Is it in scope?,
Am I asking this data to render before it is fetched?

Let's start with where I went wrong. Here is my website and the API used with the website.

https://zander618.github.io/GhibliRepo/
https://ghibliapi.herokuapp.com/

You will see that every movie lives in it's own little card and it gets fetched everytime it is called. Fetch one is called on "DOMContentLoaded".

Now you want to see more information. You click on more information and that same data is fetched again to display a single card. Now you go back to the full collection and LET'S FETCH THAT SAME DATA AGAIN (－‸ლ).

Unfortunately I coded this so every time you go back and forth between all movies and the single more informative image the page is fetching the same data after every event. Let's fix this.

Step one make sure we are still fetching the data before we remove it from the functions. Let's place that fetch in the "DOMcontentLoaded" event listener and console.log it.

Great it's all there. What now? What now, is that we need to store that data somewhere. Let store it in a variable. Make sure it is a global variable. You don't want it in a function where you will lose access to the variable due to scope issues.

That should do it right. I told .then to take that data and store it in my newly declared "obj". I then called movieCard for it to get slapped on the DOM. I then changed my "for of"s to iterate through obj instead of data. Nailed it.

ERROR

What are you saying console? You can't access 'obj'. It's right there. I see it. You see it. So why is this happening? After some trouble shooting I realized I am asking the content to load before the data is fetched. We are dealing in milliseconds but computers are fast. You may be able to console.log hundreds if not thousands of lines before that fetch returns that promise. Alright we know what we need. Let's set that timeout.

Alright. We declared a new variable called load. Added a setTimeout() to that and it calls movieCard. It waits 200 milliseconds after "DOMContentLoaded" calls it. And success!
The page no longer calls fetch, fetch, fetch, fetch ....We just have a small blip as the page loads but we are no longer sending "GET" request to the API endlessly. I hope my short story is helpful to some. As I continue to learn maybe someone can learn from me.

FIRST POST(A Start)

Zachary Sirna — Sun, 27 Feb 2022 23:54:51 +0000

I have come to what I can only hope is the end of my audio and video production career path but an end is just a new beginning. Earlier this week i began my first of twenty weeks in FlatIron's twenty week software engineering class. As I travel across this new terrain, I welcome you to follow my journey. In the coming weeks and months I hope to not only develop a large skill set for software engineering but demonstrate it here. Maybe I can help and maybe even inspire others. I have already completed the pre-work for FlatIron and learned a great deal. Especially considering I knew nothing of coding coming into this. Here is my first attempt at a website after one month of pre-work. https://zander618.github.io/Solve-the-camelCase/