Custom Interface to add database items

Permalink
I'm wondering if there's a basic interface (block) that people use when they want to build a new block to upload items for a specific package. I have noticed the forms for each block generally look the same, so it would appear that everyone creating these blocks figured this out and I'm just starting to get it.

What finally made me realize I could build my own custom upload pages was a video overview of Webvanta where they show a simple page that allows a user to upload an image, give it a name and description, link, etc. :http://www.webvanta.com/post/165477-webvanta-hosted-cms-demo-at-biz...

I want to make something that easy. In fact, I love the way this looks so much as far as ease of use and really separating content from design that I can think of a few uses...

For example, a form that would allow them to add items to a slideshow styled like this:http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/... or the awesome one you see on this page:http://nclud.com/

These are great slideshows, but a client certainly couldn't alter either of them without a form unless he gets in the HTML and starts changing image paths, etc...

This is basically what asmiller has done with his asmiller gallery and what various other Add-Ons do. I would just like to know if there's a basic form recommended to start with that has all the basics of uploading to the database and making it easy for the presentation to pull from the database. I know this won't be easy for me, but it is probably the first major obstacle for me to overcome in order to learn how to really master C5.

I just want a few pointers here, I don't plan to come back every 5 minutes and ask a million questions about this block creation process. I have a good PHP book I am reading at the moment by Friends of Ed and I'm hoping a good starter block combined with this book will help me over this hurdle.

 
jordanlev replied on at Permalink Best Answer Reply 1 Attachment
jordanlev
One of the great features of Concrete5 is its built-in File Manager. I would strongly recommend utilizing the File Manager for your edit interface. Yes, it does add an extra step when users need to upload new files, but it's usually worth it because often the user already has the file uploaded so you want to allow them to choose the file from the file manager instead of re-uploading it. Also this gives them flexibility to change the image in the future from the file manager (like upload a replacement if they want to change it, or change the title or other properties), whereas if you only allowed uploads directly from your block interface, they don't have this flexibility to change it as easily in the future. Also also, there is an advantage to having a consistent interface for file uploads -- once users know how to use the File Manager, then they can just assume it always works like that and not have to keep learning new things.

All that being said, there are three general styles of edit interface I've seen in the C5 world:

1) Choose 1 image -- see the built-in "Image" block for how to do this. Very straightforward and easy to do, but only works for 1 image.

2) Choose a File Set -- this is the easiest approach for you to develop, because you just need a dropdown menu showing all file sets, then when you display the gallery you query all images in that file set. This is not always ideal for the user though because it presents another layer of abstraction (and we're already adding one with the File Manager, so adding another on top of that might get confusing). I have a free addon in the marketplace called "Simple Image Gallery" that uses this approach. You should download that and check out the code to see how I did it. Note that I have one complicated thing in there which is I added a menu item to "go to file manager", so if users get to the edit interface and don't have a file set already made for this gallery, they can go directly to the file manager to create one without having to close the block edit dialog. If you want something even simpler which isn't as user-friendly, but the code is easier to understand, I'm attaching a bare-bones addon I've made which only shows a dropdown menu for the file set and doesn't have that "go to file manager" functionality to confuse matters. Note that this sample image gallery uses the "Coin Slider" on the front-end, because it was the simplest interface I could find for a jquery slideshow plugin, so the code is easiest to understand. Shouldn't be too hard to figure out how you would swap that out with another slide show on the frontend though.

3) Choose multiple individual images. See the built-in "slideshow" block for an example of this interface. This is definitely the easiest for end-users (especially because they can actually choose multiple images in the file manager by checking multiple boxes and picking "Choose" from the "**" dropdown menu at the top of the list). Kind of the best of both worlds combination of individual files and file sets. BUT it is much more difficult for you as the developer to code up. You're going to have to dig through the slideshow block code to see what's going on, and trust me it's not going to be easy :)

Good luck!
jordanlev replied on at Permalink Reply
jordanlev
BTW, I just took a look at the asmiller gallery in the marketplace, and it looks like he just took the built-in slideshow block's edit interface and simplified it a bit. If you want to go with option #3 I mention above, I would recommend using the asmiller gallery as a starting point, and just rip out his front-end and replace with your own front-end (but utilize his back-end code so you don't have to waste a bunch of time getting that complicated interface to work). I have used this style of interface a lot recently and trust me when I say that you don't want to try to customize it yourself (for example, if you want to add another field to each image's row) -- I mean, you should definitely try this at some point but it is very finicky and time-intensive, so I would not worry about that at first. First just get the thing working with the exact same back-end (editing) interface it has but with your own front-end. Once you have that "version 1", then tackle modifications to the back-end (and give yourself plenty of time to do so!).

-Jordan
zoinks replied on at Permalink Reply
Muchos gracias infinity +1!!! Super helpful and I will be referring to both of these posts often in the future, I'm sure. Thank you!