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.
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.
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
-Jordan
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!
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!