CodeNewbie Community

loading...

Thinking About: HTML Forms for a Not Instagram App

Jeff Mitchell
I'm an IT generalist and junkie, who's dusting off 25 year old coding skills and entering the modern age
・3 min read

Towards a "Not Instagram" Web App

I'm beginning the planning process of planning my own Instagram app.  This is a daunting task and I doubt I'll ever come close to building more of a subset of what Instagram current feature set.  I want to build my own thing because the real Instagram drove me away about six months ago, as it's become nothing but an advertising machine for big brands.  Long gone are the days when it was a fun photo sharing platform.  I'm sad about that, but it is what it is.

Wanting to build my own thing means learning and understanding some new concepts. This will be a difficult, but hopefully rewarding project.

An essential concept is forms in HTML, as this will enable user login from the landing page of my app.

What is an HTML Form?

Frequently, when visiting a web site, you'll be presented with a portal to login and authenticate to receive access to content on the other side.  The tool for achieving this is an HTML form.  The form allows a user to fill in such information as a username and password and click on a submit button.  There is logic connected to the submit button, typically coded using JavaScript, which checks for correctness of the information and if it passes muster, the information is sent on to the server for further action.  To quote the Mozilla Developer Network:

An HTML form on a web page is nothing more than a convenient user-friendly way to configure an HTTP (Hyper-Text Transfer Protocol) request to send data to a server.  This enables the user to provide information to be delivered in the HTTP request.

How does an HTML Form Send Data?

The form HTML tag has a couple of key attributes, action, and method.

The action attribute provides a destination where the form data is to go.  It needs to be a valid relative or absolute URL (uniform resource locator).  The destination could be on a completely different server OR a sub-directory on the same web host.

If neither an action nor method attribute is present in the form definition, the destination is back to the same page where the form is present.

There are two options to choose from for the method attribute.  The first is the GET method and the second is the POST method.  The Mozilla Developer Network page, "Sending form data" has a terrific explanation of the two options that the method attribute provides.  I'm not going to attempt to re-explain all the details here.  When choosing between these methods, one key point will influence the choice.  The GET method transmits form input data in the clear as part of the request URL.  Obviously, this is not a desirable choice for a login page.  The POST method is recommended for sensitive data, forms which send a lot of data or for file uploads.  In the case of file uploads, the POST method is the only one that can be used.

What Happens on the Back End?

Once the server receives the input from the form, it's typically validated further and then passed to CGI (Common Gateway Interface), ASP (Active Server Page) or PHP (Hyper-text Pre-processor) which figures out what to do with the input. The business logic in the server scripting determines that. In the user login scenario, the main information comprising the app is sent back to the user and rendered in their browser.  In the case of an app like Instagram, the user sees the content of their account, which is served up from the backend database powering everything.

I will be choosing a framework, likely Express for NodeJS for the server needs of my "Not Instagram" app.  Form handling is tricky at the best of times, and I certainly don't have the chops to code the whole thing myself from scratch.

The Road Ahead

This little article has helped me get some thoughts out on paper (so to speak) about how HTML forms work. It's important to understand their purpose and the concepts behind them.  I hope I've left you with some useful breadcrumbs for your own coding projects.  The next step for me is to go away and figure out the milestones in my road to an Instagram replacement.  I'll be sharing more along the way.  Comments, tips, and constructive criticism would be appreciated if you're so inclined.

Discussion (2)

Collapse
anitabe404 profile image
Anita Beauchamp

This was a really interesting read. I still use Instagram, but it's becoming increasingly more challenging to sift through all of the ads, sponsorships and branded content. It's also difficult for your own followers to find you amidst the chaos. I feel like this about all of the social media apps that I use. I often find myself shouting into the void and having to play algo games in order to be seen.

I am very curious about your non-Instagram app, and I like how you've started the journey with something seemingly simple but vitally important: the login and the HTML form that supports that feature. I am still learning the basics, but I'm sure the breadcrumbs you left will help me in the future when I build a form of my own.

Kudos to you for daring to build a replacement (even if it ends up being a subset of the full feature set). There are so many people, myself included, who are unhappy with what the major social media platforms have become and are interested in alternatives.

How are you tackling the planning aspect of things? Are you coming up with a list of features for a Minimally Viable Product? Are you getting into any software architecting? This is fascinating. I have so many questions, but I'll refrain. 😂

Collapse
sentinel1909 profile image
Jeff Mitchell Author

Thanks for writing this reply. I have settled on a name...Notstagram :) That's my working name, for now at least. Honestly, it's probably biting off way more than I can chew and will be something I pick away at as a learning exercise more than anything else. I learn best when I have a specific "thing" to tackle and goal to reach.

Also, I hate to say it, but I signed up with Instagram again...if only to study it when considering what features to try. I was starting my planning by spending time understanding how Instagram works now and what its moving pieces are. I think I understand the pieces that need to be done (I should actually write a post about this) and now need to make a feature list for a minimum viable product.

Don't refrain from questions, please ask away...there will probably be good ideas in them and questions will help me think.