Member Avatar for jdm

I'm developing a website for the time being to display my movie collection. I have been working on this project for a while now and I have the backbone almost done. I'm using mysql to store my data and I'm working on finishing up being able to pull data from websites for each movie title and store into the database. I have the general idea of what I want the site to be and do, but I don't know if it can be done with just html and css or javascript or if I need to work with node.js or something else.

I'm also working with php and using pdo at the moment for the sql queries. As for the site I have found a template that I like and would like to do something along those lines, but not exactly. The site will have the option to login(admin) to add, edit, or delete movie titles, but other than that there won't be a point to login. I would also like to create a queue system for those movie nights. That way you don't have to remember all the titles you talked about watching. My thought is to have the titles displayed like they are in the image below, but to be able to use the arrow keys/enter or mouse click to select the movie and have a menu pop up. If admin give the option to edit, delete, add to queue, or more info and if just user add to queue or more info.

http://www.flickr.com/photos/116553232@N02/12339237614/

and before anybody says anything yes I know the title and plot and image don't match for some they are just an example.

Also is it possible to do auto adjust the height for the row. Let say movie A has a long plot, but b and c are short auto adjust those 3 to be the same height and use the height for the longer of the 3, but the next row down with movies z, x, and y have short plots so they will auto adjust to fit better.

Any thoughts or ideas on where I should go with this would be very appreciated. Like I said the backend is almost done and I have started working on the site part, but not really yet.

  • 4 Contributors
  • 7 Replies
  • 238 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by jdm

Dani AI

Generated

Given 's PHP + PDO + MySQL backend, that stack is perfectly adequate for a movie-collection site — no need to switch to Node.js unless real-time multi-user features or a single-language server/client workflow are required. Keep initial pages server-rendered (better SEO and faster first paint) and expose small JSON endpoints for admin and queue actions. Run metadata scraping as a background job (cron / worker) so page requests stay fast and scrapes can be retried/throttled.

For the grid and the “match row height” problem, modern CSS handles this without per-item JS. Make each card a column-flex so the middle content stretches and footers/buttons sit at the bottom. Example approach:

.grid { display:flex; flex-wrap:wrap; gap:16px; }
.card { flex: 0 1 calc(33.333% - 16px); display:flex; flex-direction:column; }
.card .content { flex:1 1 auto; }
.card img { width:100%; height:auto; object-fit:cover; }

For keyboard selection and the popup menu, use a roving-tabindex pattern plus ARIA attributes so arrow keys and Enter feel native. Minimal vanilla-JS to move focus left/right and open a menu:

const cards = Array.from(document.querySelectorAll('.card'));
cards.forEach((c,i)=> c.tabIndex = i? -1:0);

document.addEventListener('keydown', e=>{
  const idx = cards.indexOf(document.activeElement);
  if(idx === -1) return;
  if(e.key === 'ArrowRight') cards[(idx+1)%cards.length].focus();
  if(e.key === 'ArrowLeft')  cards[(idx-1+cards.length)%cards.length].focus();
  if(e.key === 'Enter') openMenuFor(cards[idx]); // manage aria-expanded, focus trap, Esc to close
});

Queue and auth notes: store queues in a table (id, user_id nullable, movie_id, position, added_at). For anonymous users keep a client-side queue (session/localStorage) and sync on login. Protect admin actions with hashed passwords (PHP password_hash), sessions, prepared statements (PDO already used), CSRF tokens, and rate limits on scraping. Build incrementally: get the grid, keyboard UX, and queue API working first; then add polishing (lazy images, caching, mobile tweaks). This complements ’s and ’s points about JS vs frameworks and keeps the implementation small, accessible, and maintainable.

Recommended Answers

All 7 Replies

Member Avatar for patk570

To have the divs have different height, set your css to

.someclass{
    height:auto;
}
Member Avatar for JorgeM

To resize the divs to match that of the largest height, you can do so via javascript. You simply need to gather the various heights and determine what the largest value is. Then take that value and apply a new height to the other divs.

Here is an example...

Dynamically Resize Height of Div Elements

Member Avatar for patk570

He can also just set the max height then have a scroll bar to show more..

.someclass{
height:250px;
overflow:auto;
}
Member Avatar for jdm

Thanks I'll check those suggestions out. Do you also think javascript is the way to go for my menu's or jquery or would something like bootstrap be a better optoins? Thanks for the help.

Member Avatar for patk570

I am using boostrap right now for my website, Great for mobile friendly!

Member Avatar for Member #120589

Bootstrap can be stripped down to just include those bits that you need. However, you still get a lot of stuff you could probably do without.

If you're going to be using a lot a different js stuff, a library such as jquery may be useful, otherwise IMO, it's a bit much to include a library for using a trivial bit of js.

Member Avatar for jdm

Thanks for your thoughts on bootstrap.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.