Best way to make part of a website editable for owner?

Question

I am doing a simple website for my friend for his restaurant and I want to ask what's the best way to allow the friend to edit the daily menu on the website when he wants to.

Let's say I have the menu done via an unordered list, so I am looking for a way to allow him to edit the content of the list item. I have a few ideas on how to do this but I would like to ask what's the "proper" way of doing something like this and how it's generally done.

score 3 · Answer 1 · answered Mar 14 '23 at 23:42

So there's multiple way to go around this, with varying level of complexity both for you and your friend.

The simplest method is probably to let him edit the code himself. If all he has to do is change the daily menu, some text and/or images in an unordered list, you could easily leave him with a tutorial on how to open up the file and rewrite the stuff himself. I personally did it as well for someone who wanted to be able to add 'news' articles on a page. Gave him code snippets, added HTML comment where it should be pasted and they managed.

The more complex solution would be to write a JS script that dynamically loads a resource file (e.g., JSON, XML, CSV... or even some custom format you agree upon), from which the data gets loaded during loading (or the JSON could be already included in the JS script, at which point the case is similar to previous point). E.g. maybe take a look here:

Trying to load local JSON file to show data in a html page using JQuery

Finally, the most complex version is a Content Management System, which essentially means building (or using existing) app that sits on the server and can manipulate the webpage using some sort of fancy GUI (e.g., Shopify). That's most likely an overkill however, and I'd personally go with the previous options based on how versatile your solution should be.

Of course there are many variations of these things. You can run PHP/Node.js or some other server app that assembles the webpage when requested, you could create some kind of HTML fragments that get plugged in the main page... but I think it boils down to those main cases.

Naturally there could be some obvious straightforward alternatives I don't know about, but I'm sure someone will point them out.

quantasium · Answer 2 · 2023-03-15T00:57:53.490

If you want a simple way to do this, you can use Javascript to add the contenteditable="true" attribute to an HTML element, or set document.designMode = "on" to affect the entire page.

After that, you'd need to save the new code to the server so that it would change for everyone. However, there are major drawbacks:

This method is extremely insecure, since anyone with access can easily insert malicious content that can affect the frontend or even the backend.
The formatting is rather limited, since there's no GUI. Instead you'll have to rely on keyboard shortcuts and Copy/Paste.

If you're just making a quick website, this will work OK, but never do this in production unless you're sure you know what you're doing.

Design Mode - https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode
Content Editable - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

Albert D. Kallal · Answer 3 · 2023-03-15T00:53:43.530

You do this like how "most" sites allow this.

Add, adopt, and get your hands on a HTML markup editor.

So, say ckedit, or one of many other HTML editors.

I mean, how do you think word press works?

So, here is a screen shot of Ckeditor:

So, you can save that content into a database, and then display on a page.

I mean, think of THIS site (StackoverFlow).

We type in stuff all day long, and then it "appears" in our posts!!!!

So, you can do the same.

Adopting such a edtior is great.

So, say for a welcome page text, or whatever?

You can just display that text whatever way you want.

You then just drop a label, or div, and load that content into that div.

So, your welcome page might be this:

I'm using the free ajaxtoolkit HTML editor.

Your editor is just a simple text box placed on the form.

Thus, say, this:

        <div id="MyEditArea" runat="server">

            <asp:TextBox ID="TextBox1" runat="server" Width="1309px" 
                TextMode="MultiLine" Rows="40" 
                f="Content"
                ></asp:TextBox>


            <ajaxToolkit:HtmlEditorExtender ID="TextBox1_HtmlEditorExtender" runat="server" 
                BehaviorID="TextBox1_HtmlEditorExtender" 
                EnableSanitization="False" 
                TargetControlID="TextBox1" DisplayPreviewTab="True" DisplaySourceTab="True">
            </ajaxToolkit:HtmlEditorExtender>

        </div>

so, the page now looks like this when you edit:

(you can paste in anything you want. Even a "table" or menu.

And EVEN better, is you can paste in pictures, or whatever.

So, the editor shows this:

Now, I can create a new page - say called greeting.aspx.

That page is this:

<body>
    <form id="form1" runat="server">

        <div style="padding:35px" id="mydiv" runat="server">            s

        </div>

    </form>
</body>
</html>

And code to load say is this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim rst As DataTable = MyRst("SELECT * from tblContent WHERE ContentName='MainPage'")

    Me.mydiv.InnerHtml = rst.Rows(0).Item("Content")


End Sub

And we now see, get this:

So, HTML editors have a ZILLION use cases.

For example, I might want to build a email (message) editor for all the messages and email notifications for the web site.

With a HTML editor, then you can do things like this:

so, that "html" area is only a text box, but with allowing the text box to "hold" and "have" content, then that message and text can be "anything" you want, including a email with images for those templates.

or, how about a issues editor - and you can toss in screen shots for issue tracker database.

So, say this:

So, HTML editor controls have A ZILLION use cases.

You would NEVER have users for content edit, or touch the actual software (well, a bozo the clown outfit might!!!).

So, adopt a HTML editor, and simple then let users enter the content, the greetings, the holiday (season message).

and then for things like daily speicals, evening specials etc?

It all becomes simple rows in a database.

and even more amazing? The amount of code you have to write is VERY small, not much more then say code to save the content of a text box to the database.

The end user can paste in pictures, and in most cases, often even text from Word will correctly "paste" into that text box.

so, for things like bulleted lists etc. (a lunch menu), then the end users need ZERO training in terms of learning HMTL. It all visual, all very easy, and so is the code to drive such a system.

As I stated, a HTML editor plug in has near un-limited uses, and allows people to enter content into that system with great ease.

As noted, think of this post on Stack Overflow. Did I have to know or write any HTML for this post? Nope!!

score 0 · Answer 4 · answered Mar 15 '23 at 01:15

If there is only the one thing that needs frequent editing, I would probably set up a text/json file or .CSV file that they can edit and upload, and have the site read the file and use the data on page load. If you dont want to set up an authentication system on the site, ftp would work with this method.

If they struggle with simple technical stuff, I'd set up a text editor they can access using a login, along the lines of Albert D. Kallal's answer. I did this for a site I built for my barely technically literate parents and it worked out well.

Best way to make part of a website editable for owner?

4 Answers4