Snackgirls Coding Notes · 02
What happens behind the Save button?
Follow a game note through the frontend, backend, server, and database.
What happens after we select Save?
Hi, it’s Red. What if we made a website to record the games we play and a few thoughts about them? We’re calling our example Play Notes. Today, we’ll type “Beat the boss!” into a note field and save it.
When I press Save, where does my note go?
I could see the letters appear, but I couldn’t explain what happened after that. So AIKO and I followed the path of a save request.
How a note gets saved
The middle panel shows the server checking the request sent by the screen and recording the data in the DB.
The screen and the processing code have different jobs
Frontend: what I see and interact with
The game list and the screen where we type a note are the frontend. On the web, this usually means the parts displayed and running in our browser. The “Beat the boss!” field and Save button are examples.
Backend: code that checks and handles requests
When the screen asks the server to “save this note,” it sends a request. The backend program receives it, checks the necessary conditions, and processes it. For example, it can check the login state, note content, and permission to save.
The Save button is on the screen, but the server checks whether saving is allowed.
Server: where the program runs and answers requests
For now, think of the server as the computer or runtime environment where the backend program runs. Our note-saving code runs there. The backend is the processing program; the server is where that program does its work.
“Server” can also mean the program that answers requests. Here, we’re using it to mean the execution environment so the roles are easier to separate.
Database: where records are managed
A database, or DB, stores and manages data we want to find later, such as game records. Saving the author and note content lets us retrieve that person’s records later.
Four roles do not mean four computers
One computer can handle several roles. For now, focus on showing information, processing requests, running programs, and keeping records rather than counting machines.
The answer sent back by the server is a response. The screen can use it to show “Saved” or “Could not save.” But seeing a success message alone does not confirm that the data was actually stored in the DB.
Who works behind the screen?
The video below follows a game item purchase. Just as with saving a note, watch how the server handles a request from the screen.
Original video · Korean audio.
We followed what happens behind Save
The note in the input field goes to the server in a save request. The server-side program checks the login state and content, records the necessary data in the DB, then returns a result.
I’m starting to understand what happens behind that Save button.
I drew arrows showing the note’s path in my notebook. Next, I want to look at what happens when we click a button on the screen.
Small exercises · 3 questions
Trace how a note gets saved
Think about the roles and order of events, from typing a note to seeing the result. Try answering before opening the examples.
1. Match the jobs
Match “show the note field,” “check login and content,” and “keep the note data” with frontend, backend, and DB.
Show a sample answer
The frontend shows the field, the backend performs the checks, and the DB keeps the data.
2. Put saving in order
① Show the result ② Send the save request ③ Write to the DB ④ Check login and content. Put these in order for a successful save.
Show a sample answer
② → ④ → ③ → ①. The screen sends the request; the server checks and saves it, then returns the result.
3. What comes after “Saved”?
The screen says “Saved.” What could you do to check whether the record is really there?
Show a sample answer
Retrieve the saved record and check that the content matches. A success message alone does not verify that the DB stored it.
Comments
0No login needed. Edit or delete your comment from the same browser.
All comments 0
한국어 · English · 日本語No comments yet. Start the conversation.