DEV Community: Zhona

MVC

Zhona — Mon, 12 Dec 2022 15:51:30 +0000

I made it to Phase 4! The second to last Phase at Flatiron School! In this Phase we learned Ruby on Rails which is an open source web framework written in the Ruby language. It is a full stack framework allowing developers to build on the front and back end. At Flatiron we were taught JavaScript and React during the first 2 phases so we will only be using Ruby on Rails as a backend language.

Starting this phase made me realize how fast time flies, it feels like I just started Phase 1 a few weeks ago. At the moment I'm writing this blog I have already completed Phase 4 and I'm preparing to start Phase 5. I would say Phase 4 was definitely one of the phases where I learned the most. For project week my group and I decided to make a fake NFT marketplace. Fake meaning we just rendered the jpegs and had a fake cart page. Our main goal for the project was to meet the MVP requirements. While we did do that, we had tremendous trouble connecting the front end to the back and doing authentications. One moment full crud on the project table was working perfectly... then we started working on the front end and errors everywhere! We moved onto doing the login and bam! More bugs! While the project was stressful to do, I'm glad my group and I were able to complete it on time (5 minutes before it was due to be exact!). Now I feel pretty confident moving onto Phase 5 and I'm excited to see what I'll be able to create within the next 4 weeks.

One thing I like about Ruby on Rails was that it wasn't difficult to learn. The syntax was pretty simple and the errors messages were extremely helpful, and less in your face like React. Ruby on Rails has 3 main subdirectories, the model, view and controllers also known as the MVC. These three are the main components that makes up the architectural pattern for this specific software application.

Apeksha Sighn does a great job at explaining how each of these 3 components differ.

"The browser sends a request for a page to the controller on the server
The controller retrieves the data it needs from the model in order to respond to the request
The controller gives the retrieved data to the view
The view is rendered and sent back to the client for the browser to display"

The model, view and controller component all work together to create a functioning back end.

For example, let’s say you’re on a website and we want to add an item to cart. To do that we’ll click on the "add to cart" button and we’ll get redirected to the carts page with our items in the cart. How does one click make all this happen in a matter of seconds?

When we click “add to cart” the browser sends a request to the controller file on the server. The controller files “read” the request and return the appropriate output from the model files. The data retrieved from the controller and model is then passed on to the view. The view renders the data which is what the user sees on the front end.

The view should contain code relating to displaying the data only. The data in this file may be html or a combination of html and ruby code. Everything Ruby sends to the web browser is handled by the view.

The controller holds the functions that defines the routes in the routes file. In the routes file we set back end routes that redirect us every time we make a call. In order for ruby to direct us to the route we have to define a function in the controllers file. The controllers file tells us what information to display when we get to a certain route. This is all then rendered by views.

The models file holds all our table relationships and the validations. The relationships determines how tables can interact with each other and the validations determines if certain functions in the controller will be valid when we run it.

The controller holds the functions that you define in your models file. In the routes file we set back end routes that redirects us every time we make a call. In order for ruby to direct us to the route we have to define a function in the controllers file. The controllers file tells us what information to display when we get to a certain route. This is all then rendered by the views.

Reference -
https://blog1.westagilelabs.com/m-v-c-architecture-of-ruby-on-rails-9712719a69ed

.map like a function?

Zhona — Wed, 26 Oct 2022 23:39:06 +0000

Before beginning Phase 2 I would go around the school asking the students in the phases above how I should prepare for phase 2, they all replied the same, “study .map and filter”. Did I do as they suggested? NOPE. Should I have done as they suggested? YES! During Phase 1 I did use .map once in my project(with the aid of a student in the upper class) but that was it, I didn’t have a clear idea of what its functionality was, therefore I came into the second phase pretty much clueless.

I knew React was based on Javascript and that was about it. Learning React was tough… very tough. After learning vanilla Javascript for 3 weeks I was finally getting to a point where I was comfortable using it but that moment didn’t last very long, phase 2 came around and I was back to the beginning. All the syntax I learned in Phase 1 wasn’t relevant anymore and I had to start over from scratch.

So what is .map?

Here is Geekforgeeks.com’s definition of .map(),
“Map is a collection of elements where each element is stored as a Key, value pair. Map objects can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key, value pair in the same order as inserted.”

.map takes the original array and returns a new array with items added to it. When mapping we need to give each element its own unique key which helps identify it. Before we get to the more complex stuff, let’s get a basic idea of what .map is.

Here is an example
//the array
const array1 = [1, 4, 9, 16]; =>

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
As we can see we have an array, passed through .map which takes the original array, multiplies it by 2 and returns a new array with a new value.

Here is another example.

Const numbers = [10, 20, 30, 40 , 50 ]

Const addTwo = numbers.map((number)=> (
number + 2 ))
What would the function return?? Take a guess.

A)12, 22, 32, 42, 52
B)8, 18, 28, 38, 48
C)20, 40, 60, 80, 100

To get the value of the variable addTwo we will have to console.log it.
console.log(addTwo)
12, 22, 32, 42, 52.

The answer was A! What exactly did the code above do? First we have an array called numbers with the values of 10, 20, 30, 40 and 50. We made a new variable called addTwo where we applied .map on the numbers variable and got a return value of 12, 22, 32, 42, 52. To put it simply, .map is a function. It takes an array, applies a function to each value in the array and returns a new value. In our case we are passing numbers as the value and telling .map the function to add 2 to each of the values.

Another way to look at it is the image below. We start off with four cups of coffee but after applying the .map function to all four of the coffee we get a latte. In this example the coffee is the array, the barista pouring in the milk acts as the .map function and latte is the result of the coffee and the barista.

If we were to turn this into code, it would be something like this.

//array
Const cafes =[coffee, coffee, coffee, coffee]

We pass the coffee(the array) to the barista(the function) who will then pour milk into each cup of coffee.

Const addMilk = cafes.map((coffee)=> ( //THIS IS NOT A VALID FUNCTION
Coffee + milk ))

The final product is a latte!
console.log(addMilk)
Latte

Another example would be decorating cupcakes. Let's say we start off with five plain cupcakes but we want them to all have chocolate icing. A simple to do list would be this-

How to “make” five iced chocolate cupcakes.
Ingredients -
Five plain cupcakes,
Chocolate icing,
Human,
Spatula

Step 1 - Get five plain cupcakes.
Step 2- The human needs to get a dollop of chocolate icing using the spatula.
Step 3- Apply the chocolate icing on the cupcakes using the spatula.
Step 4- finish!

In this example the 5 plain cupcakes represent the array. The function is the person and the chocolate icing is the expression we’re applying to each cupcake. The final result is a chocolate iced cupcake.

At first I was confused on what .map’s purpose was but after practicing and practicing I am finally comfortable using it. My definition of .map is that we use when we want to add more information to every object in an array. Instead of hard coding and manually typing a new array we can just call a function that will iterate through each value for us.

References
https://www.geeksforgeeks.org/map-in-javascript/

Phase 1 blog

Zhona — Mon, 19 Sep 2022 01:19:50 +0000

I completed phase one at Flatiron School! This was definitely a challenge but I'm so proud I completed it. These past 3 weeks went by so quickly and I can for sure say I learned a lot. I enjoyed getting to know my cohort and learning along with them.

During phase one we learned about the basics of JavaScript. After spending 2 weeks learning about the DOM, event listeners and fetch requests, the class was able to use their skills to make a functioning website. For my website, my partner and I created a movie review website where people can read descriptions of top rated and new releases movies. A part of my project required me to fetch the json file and display the information from it on the dom. To do that I had to use either innerText, innerHTML or innerTEXT. While I could’ve used either 3 of those to complete my task, I was still confused about which one to use. So here’s a breakdown of the three make your life easier!

This will be out sample code.
We used a div element and set the id to exampleCode. We have a bold and code tag. The bold tag will make the content inside it bold and the code tag will display the content inside it as monospace font.

<div id=‘exampleCode>

  This world is <bold>bold</bold>. There is a space       <code>here</code>
  </div>

To get the text to display we can declare an element to it and then call it using innerHTML, innerText and textContent.

const exampleCode = document.getElementById('blog-test');
exampleCode.innerHTML
exampleCode.innerText
exampleCode.textContent

When we call the code using .innerHTML, it will return this.

"This world is <bold>bold</bold>. There is a space       <code>here</code>"

.innerHTML will return the html markup within the code as we can see with and . Use this when you want to see the html content of a code.

When we call the code using .textContent, it will return this.

 "This world is bold. There is a space       here"

.textContent will return this code with the html markups applied to it. We can see the extra spacing added between “space” and “here” have been applied. Use this when you want to see the value of an element with the formatting applied.

When we call the code using .innerText, it will return this.

"This world is bold. There is a space here"

.innerText will return the code with the html markups applied to it but the extra spacing in the code will be ignored. Use this when you want to see the value of an element but with the formatting ignored.

Reference list
https://betterprogramming.pub/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc
https://www.w3schools.com/